Using theme options to change link colours

Question

Using theme options to change link colours

snthr

2021年12月31日 11:01

I'm developing a WordPress theme with some theme options (using the ThemeShaper sample theme options page), and one of the options I want is to allow users to set their own link colours.

At the moment I can get the hex value they set (say #134679 or something) and spit it out somewhere, but I don't know how to include it in the theme.

Presumably it needs to be dynamically added to a stylesheet (or a new stylesheet dynamically generated?) or something like that, in order to then be linked to from the theme's pages and all start to work. If so, how is this done? And what's the 'best' way to do it?

Thanks.

Edit: I'm not a PHP person, at all, so... layman's language, please. :)

Topic theme-options css Wordpress

Category Web

Rev. Voodoo · Accepted Answer · 2021年12月31日 11:01

To make theme options for css, you include the css in the header. on wp_head...

For instance, I have set up various options in my admin menu in an array.

        'name' => __( 'Custom CSS', 'voodoo_lion' ),   
    "desc" => __( 'Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}', 'voodoo_lion' ),   
    "id" => $shortname."_custom_css",   
    "type" => "textarea",   
    "std" => ""
),

is the option for entering custom css. Then I add that action to wp_head

add_action( 'wp_head', 'voodoo_inline_css', 100000 );

and define voodoo_inline_css. I have a variety of things in the voodoo_inline_css function, but one of them is:

if( get_theme_option( 'custom_css' ) ) 
    theme_option( 'custom_css' );

Hopefully that helped a little... you can also just call the option directly in header.php

<style type="text/css" media="screen">
   .content a:link {
        color: <?php echo get_theme_option(' link-color '); ?>;
    }
</style>

Either way, you need to output the css into the header rather than trying to get it into a stylesheet.

Just a note here, this theme options code is copy/pasted from my theme as an example so you can see bits of code and compare. Since you followed your own tutorial, your options will be set up somewhat differently. I wanted to show that you would output your option to the header (using either wp_head or directly) to have the css take effect.

Using theme options to change link colours

About