Approach to customizing a page, and Framework compatability

Support
#1

Hello all -

I have two sites that are happily using Pro. I have a need now to add a customer HTML, CSS, JS(HCS) widget in the middle of a template. That is, I am designing an ROI calculator that I’ll build the HCS for in a test page and then apply to a template using the advanced temple customization methods that I know are in the help files. I’ve read some of those before, but I haven’t had a chance to build a custom template. I have a couple of questions:

A) In a static site I would normally look for a framework like Bootstrap, or a Materials Design set up to use in planning my design. I’m speaking about planning for using controls like Slider bars, progress bars, styled dropdowns, input boxes, bar and pit charts,etc. Can I bring in my own HCS framework like Bootstrap? What are others using these days? Are there any extensions to Pro that I am missing ?

B) I’ll also need to write all my own JS to support the calculations, or I may pop out to a PHP server for scripting. Any suggestions on other approaches to doing this in a X Pro theme?

Thanks in advance for any tips.

Rich

Something like this.

Bitmap
Bitmap744×558 273 KB

#2

Hi Richard,

Thanks for reaching out.

1.) If you would like to use the Bootstrap CSS framework, I suggest that you will enqueue the style and script in your child theme functions.php

2.) If you are going to write a script, we have an option where to can add it, just go to Pro > Theme Options > JS or you can write the script inside the page.

image
image819×609 58.4 KB

Hope that helps.

Thank you.

#3

Hi Marc -

Thank you for the response. Are there any other forum posts or other resources for integrating UI frameworks?

Surely others have done this. How does someone add a custom slider or progress bar?

I see how the JS can be added to the cue, and there are also CSS concerns, etc.

#4

Howdy, @richexperiences! Thanks for writing in…everything you’re discussing can certainly be done in the theme, it’s just a matter figuring out the best approach that will work for your needs. All of this falls squarely into custom development, so while we cannot provide any support with regards to “wiring it all up,” we can help by pointing you in the right direction to get the ball rolling for sure.

As far as CSS goes, you have multiple ways to introduce custom CSS into your project. The easiest way to add quick changes would be using the Code Editors in the theme:

While this certainly is great for quick changes and edits, as your files grow in size, it might become a little difficult to manage everything from here. For more involved projects, especially if you plan on utilizing some sort of framework based on a third party library, you may want to look into enqueuing a stylesheet via a child theme, similar to what @marc_a mentioned above. You can learn more about making updates to certain files via a child theme here:

And WordPress has simple methods that can be used to introduce any style…

…or script…

…into your project. As far as adding custom sliders, progress bars, et cetera…again, this is all in the custom development realm and something that will require research on your part to find the best solution as you will know what will work best for your needs. There are many different ways to approach these types of problems, but we cannot advocate for one or another as everyone’s needs are different and what works for one person might not be the right fit for another. As far as introducing all of your custom code though, following the resources mentioned above will surely get you on the right path.

Cheers!

1 Like
#5

Hi Kory -

Thank you very much for this. Yes, I was more or less wanting to understand if this had been done very often so that I could gauge if it was worth the effort to try. I’m glad it is!

I’m sorry, I didn’t mean to imply that I wished all the steps would be written up, just a summary like this one. :slight_smile:

Again, thanks for your time. I’m off to learn about Views!

Rich

#6

Hi Rich,

You are most welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.