How can I add the following css code to my page header from functions.php?

Question

Right now, I'm placing the following code in header.php.

I think that solution isn't very elegant.

How add this CSS code from functions.php to my header (how would that code look like)?

    wp_head();
?>
<style>
    .jimgMenu ul li.landscapes a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'intro_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.people a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.nature a {
        background: url(<?php bloginfo('template_directory'); ?>/images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
        background: url(<?php bloginfo('template_directory'); ?>/images/abstract.jpg) repeat scroll 0%;
    }

    .jimgMenu ul li.urban a {
        background: url(<?php bloginfo('template_directory'); ?>/images/urban.jpg) repeat scroll 0%;

    }
    .jimgMenu ul li.people2 a {
        background: url(<?php bloginfo('template_directory'); ?>/images/people.jpg) repeat scroll 0%;
        min-width:310px;
    }
</style>

To "call" something, it has to be in a function, or in its own file which you can include() or require(). — Marc B
– Marc B, Commented Feb 10, 2011 at 20:25

Terri Ann · Accepted Answer · 2011-02-10 23:47:01Z

Using hooks is the best way - then you only have to modify functions.php and not the template, making it easier to update the template should the author release changes, updates or patches.

functions.php

<?php

function add_styles()
{
    ?>
    <style type="text/css">
    .jimgMenu ul li.landscapes a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'intro_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.people a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.nature a {
        background: url(<?php bloginfo('template_directory'); ?>/images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
        background: url(<?php bloginfo('template_directory'); ?>/images/abstract.jpg) repeat scroll 0%;
    }

    .jimgMenu ul li.urban a {
        background: url(<?php bloginfo('template_directory'); ?>/images/urban.jpg) repeat scroll 0%;

    }
    .jimgMenu ul li.people2 a {
        background: url(<?php bloginfo('template_directory'); ?>/images/people.jpg) repeat scroll 0%;
        min-width:310px;
    }
</style>

    <?php
}
add_action('wp_head', 'add_styles');

assuming your theme is built correctly and had wp_head(); in the <head>, which in your example it does, you won't need to mod any files besides functions.php

I will add that for site load optimization and performance enhancement because of client side caching of external style sheets you should make a separate style sheet then instead of the function I mentioned above printing out the CSS it would print out the <link> to the styles sheet.

While you can accomplish not using <?php bloginfo('template_directory'); ?> and instead use relative urls (ie. ../images/.....) that would still pose a problem with the get_option(THEME_PREFIX . 'intro_image') so if your style sheet changes are really this small what I listed above using the hook is an okay solution, if the styles you want to inject into the <head> are longer/larger than you listed in the question I would suggest using @erenon's suggestion about a dynamic style sheet and a what I just mentioned about modifying my function & hook to include the style sheet instead of printing the styles.

jerebear · Accepted Answer · 2011-02-10 20:29:12Z

2

You can easily wrap the CSS in a function

function headerCSS(){
    ?>
      // YOUR CSS
    <?php
}

And then call the function

<HEAD>
<?php headerCSS(); ?>
//other header stuff here
<?HEAD>
<BODY>

answered Feb 10, 2011 at 20:29

jerebear

6,7174 gold badges34 silver badges39 bronze badges

Comments

erenon · Accepted Answer · 2011-02-10 20:28:49Z

0

You can't call it, but you can insert it as css:

<link href="generate-css.php" type="text/css" rel="stylesheet" />

answered Feb 10, 2011 at 20:28

erenon

19.2k2 gold badges66 silver badges97 bronze badges

Comments

stealthyninja · Accepted Answer · 2011-02-10 20:36:15Z

0

@janoChen: Assuming your directory structure should look like this

/wp-content/
  /themes/
    /your_theme/
      /images/

put all those styles without <?php bloginfo('template_directory'); ?> in a styles.css file within /wp-content/themes/your_theme/ and then in your header.php simply have

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles.css" media="screen" type="text/css" />

answered Feb 10, 2011 at 20:36

stealthyninja

10.4k11 gold badges57 silver badges61 bronze badges

Comments

Diodeus - James MacFarlane · Accepted Answer · 2011-02-10 20:29:22Z

-1

This is a bad solution. External stylesheets are cached by the server. The method you're using means they must be served up in every page, and are more resource-intensive on the server side.

Look at using the tag to set the site resource path instead.

The base tag is very useful for Web designers who build websites in one location but will ultimately be placed in another location.

See: http://webdesign.about.com/od/htmltags/qt/how-to-use-html-base-tag.htm

answered Feb 10, 2011 at 20:29

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

How can I add the following css code to my page header from functions.php?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related