Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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.</p> <p><strong>functions.php</strong></p> <pre><code>&lt;?php function add_styles() { ?&gt; &lt;style type="text/css"&gt; .jimgMenu ul li.landscapes a { background: url(&lt;?php bloginfo('template_directory'); ?&gt;/images/&lt;?php echo get_option(THEME_PREFIX . 'intro_image'); ?&gt;) repeat scroll 0%; } .jimgMenu ul li.people a { background: url(&lt;?php bloginfo('template_directory'); ?&gt;/images/&lt;?php echo get_option(THEME_PREFIX . 'slider_image'); ?&gt;) repeat scroll 0%; } .jimgMenu ul li.nature a { background: url(&lt;?php bloginfo('template_directory'); ?&gt;/images/nature.jpg) repeat scroll 0%; } .jimgMenu ul li.abstract a { background: url(&lt;?php bloginfo('template_directory'); ?&gt;/images/abstract.jpg) repeat scroll 0%; } .jimgMenu ul li.urban a { background: url(&lt;?php bloginfo('template_directory'); ?&gt;/images/urban.jpg) repeat scroll 0%; } .jimgMenu ul li.people2 a { background: url(&lt;?php bloginfo('template_directory'); ?&gt;/images/people.jpg) repeat scroll 0%; min-width:310px; } &lt;/style&gt; &lt;?php } add_action('wp_head', 'add_styles'); </code></pre> <p>assuming your theme is built correctly and had <code>wp_head();</code> in the <code>&lt;head&gt;</code>, which in your example it does, you won't need to mod any files besides <code>functions.php</code></p> <hr> <p>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 <code>&lt;link&gt;</code> to the styles sheet.</p> <p>While you can accomplish not using <code>&lt;?php bloginfo('template_directory'); ?&gt;</code> and instead use relative urls (ie. ../images/.....) that would still pose a problem with the <code>get_option(THEME_PREFIX . 'intro_image')</code> so if your style sheet changes are really this small what I listed above using the hook is an <em>okay</em> solution, if the styles you want to inject into the <code>&lt;head&gt;</code> 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 &amp; hook to include the style sheet instead of printing the styles.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload