WordPress.org

Ready to get started?Download WordPress

Forums

Different headers... unresolved (2 posts)

  1. pbwordp
    Member
    Posted 5 years ago #

    Hi, I would like know how to assign different images to each of my category pages (Home, About etc...). Some had suggested a code using codex method, the problem is that I don't know how to implement that code.

    *If the code needs to be place in the header.php could anybody tell me exactly where, and wether I need to remove or replace any tags in that file? Thanks so much.

  2. jberghem
    Member
    Posted 5 years ago #

    Most of the editing you'll be doing will be in the style.css file. The images will not be placed in the (X)HTML code but will be set as a background with CSS. Since you have not mentioned which theme you're using nor posted the code from the header.php, I'll use the code from the "Default" theme of WP.

    Step one:
    Open the header.php and find:

    <div id="headerimg">
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>

    Change the <div id="headerimg"> to <div id="headerimg" class="cat_<?php single_cat_title(); ?>">
    This means if you're on the category page named "cars" the output of this is will be <div id="headerimg" class="cat_cars">
    (note this will only work on the category pages not for "home" and "about" because those are "Pages" for Pages you will need to create Page templates.)

    Step 2:
    Open style.css
    add for each category the corresponding code. For the cars category it would look something like this:

    .cat_cars {
    	background-image: url(images/cars.jpg);
    	width: 800px;
    	height: 100px;
    }

    Naturally you may need place the image named cars.jpg in a folder named images and adjust the width and height to the actual dimensions of the image.

Topic Closed

This topic has been closed to new replies.

About this Topic