The first step is to create an option with “Runway Option Builder”.
Then the option created will be available in the “Theme Options” in the backend, and you can assign values for each option. For example, the user can choose the dominant color, the font-family for the body, and any other option you decide.
The steps to do this are:
1) create an option with Runway> Options Builder
2) assign a value to this option from the Options page
3) Create a CSS rule in the head of our header.php to collect the chosen option.
3b) If you plan to use a lot of options, it would be better to make a separate file that puts the options in the header.
First Example: create an Accent Color for your theme:
– Go to Runway > Options Builder, choose the page (or create a new page) where you want to put the option, and create a new “color-picker” field. You could also a default value for this option. Don’t forget to save.
– Go to the Option page of your theme, to assign a color value to try to change the accent color of the entire website.
– Open your header.php and create an internal
<style> inside the
<head> that select the classes and ids that you must modify to change the property dynamically. For example, you would modify the “color” property of “a:hover” or some “background-color” of the buttons, and so on. At this time simply apply the color “red” to see if all works fine.
Reload the page and check if the color change as you desire. It works? great! it’s time to put some php code to get the color chosen previously, in “Theme Options”. The php code to do this is very simple, i’ts only an “echo” construct.
First of all, return to the Option page where you chosen the color, click on “Toogle Developer Info” to see the option names, then copy the “get_options_data()” from the options you want to get the value.
Return on the css you are editing and replace “red” with:
<?php echo PASTE_HERE_GET_OPTIONS_DATA ?>.
Well done! if you’ve done everything right, it should work. Try to change the color in the options page, return to the frontend, reload the page, then you should see the color change.
Second Example: create an Option to choose a Goggle font for the body
Put the options in a separate file