Enabling Custom Backgrounds and Headers

It's very easy to enable custom backgrounds for your theme. Just add the line in Listing 6-36 to your theme's functions.php file.

Listing 6-36. Enabling custom backgrounds in functions.php add_custom_background();

That's all! Once you save this change, you'll see a new menu item under Appearance: Custom Background, and you can go choose your background image. You don't have to add anything to your stylesheet. The styles in Listing 6-1 (at the beginning of this chapter) are automatically added via wp_head().

Adding support for custom headers is a bit more complicated. Because the header is added as an <img> tag and not a background, the changes aren't just styles. You need to define some defaults: an image to be shown if the user hasn't yet chosen one, the image dimensions, and whether the text (site title and description) should be displayed in addition to the image. Listing 6-37 shows everything you need to add to your functions.php file; Listing 6-38 shows the relevant portion of header.php.

Listing 6-37. Enabling custom headers in functions.php define('HEADER_TEXTCOLOR', '');

define('HEADER_IMAGE', '%s/images/header.jpg'); // %s is theme directory uri define('HEADER_IMAGE_WIDTH', 800 ); // in pixels define('HEADER_IMAGE_HEIGHT', 200 ); define('NO_HEADER_TEXT', true );

function simplex_header_styles() { ?> <style type="text/css"> #headimg {

height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; width: <?php echo HEADER_IMAGE_WIDTH; ?>px;

<?php if (NO_HEADER_TEXT) { ?> #header hi, #header #desc { text-indent: -99999px;

add_custom_image_header( '', 'simplex_header_styles' ); add_action('wp_head', 'simplex_header_styles');

Listing 6-38. Printing the custom header in header.php

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" id="header-bg" />

<a href="<?php echo get_settings('home'); ?>"><h1><?php bloginfo('name'); ?></h1></a>

<p id="desc"><?php bloginfo('description'); ?></p>

The styles function will include a few CSS rules in the page header. Since they will be inserted at the wp_head() hook, after the theme stylesheet link, they'll override its values.

Was this article helpful?

0 0

Post a comment