In response to a request for help in the comments for my Beginner’s Guide to WordPress post, I created this quick reply on how to change the default photo or image in your WordPress theme. Unfortunately, I discovered I couldn’t use all of my formatting in the comments section, so here’s the brief version. I’ll add some screen captures later.

There are a few ways to change your WordPress theme images, depending upon your preferences.

To change a WordPress theme header photograph, you have to know first if the photograph is part of a CSS tag background or if it is an image tag in the HTML.

First, look at the HTML code either by viewing the page source from your browser or by opening the header.php template in your theme (/yourwordpresspath/wp-content/theme/yourtheme [substituting your wordpress server path for /yourwordpresspaath/ and the name of the theme you are using for /yourtheme/].

Now look for a div tag labeled something like “header” or “header_img” and is followed by some HTML that looks something like this:

<img src="/images/header_1.jpg" width="970" height="140" alt=" header image 1" title=" header image 1" />

The specific attributes will probably be different (unless you are using the Cutline 3-Column-Split-11 theme by Chris Pearson), but basically you are looking for an actual tag that displays the header photo.

How To Change Your WordPress Theme Photo or Image If It Is An <img/>Tag

If you find that tag, you can create another image the same width and height and upload it to the same directory as the current image. Note: If you hate mucking with the HTML, you should give it the same name as the current header photo and upload it to the same directory. If you are a cautious bloke (which I am), first re-name the current header image to something like “original-header_1.jpg” before uploading your new “header_1.jpg” (again, assuming this is the name of the header photo in your theme template.)

If you don’t find the tag in your theme header.php template, it means that your image is referenced in a CSS background.

How to Change Your WordPress Theme Header Photo or Image If It’s Part of a CSS Tag

Look at your HTML code and note what ID tags are in your header code For example,

<div id="headerimg">
<div id="headertxt">
<h1><a href="<?php echo get_option('home'); ? rel="nofollow">/"><?php bloginfo('name'); ?></a></h1>
...
</div>
</div>

or

<div id="header" >
<h1 ><a href="<?php bloginfo('url'); ? rel="nofollow" >" ><?php bloginfo('name'); ? ></a ></h1 >
<p > >strong > <?php bloginfo('description'); ? > </strong > <br/> </p >
</div >

You almost always are looking for something with the ID “header” or “masthead”.

Open your theme’s style.css file (if your theme files are writeable, you can do this in WordPress Appearances | Editor; otherwise, open it in your web favorite web editor. I’m partial to BBedit or CSSEdit).

Find the CSS tag that matches your HTML code. For example, in the first example above, it is “id=”headerimg” so I find #headerimg:

#headerimg {
height: 180px;
width: 517px;
background:url('images/mainbannerimage.gif');
}

Now, notice that the line: background:url(‘images/mainbannerimage.gif’);. This is the line that specifies that the background for this division is the mainbannerimage.gif found at the URL the-path-to-your-wp-content-themes-theme-name/images. Unless a full URL path is specified, the CSS will start with the directory in which it resides. So you now know where the image you want to replace is stored: your-Wordpress-path/wp-content/themes/your-theme/images.

Download the image and make your new image the same width and height. Again, if you hate mucking with the CSS, you should give it the same name as the current header photo and upload it to the same directory. Keep a copy of the original image on your system in case something goes wrong with your new image.

If creating and modifying images and photos for the web is a bit out of your area of expertise, you should be able to find someone who can do it for you either by asking a friend, bartering services, or hiring someone. You can always put it up on one of the freelance sites like freelanceswitch.com or elance.com or 99designs.com.

I hope that helps and make sense for you. If you find the information useful, please spread the word. I’ll be adding more WordPress site administration tips in February.

Tagged with →  

31 Responses to How to Change the Header Image or Photo of Your WordPress Theme

  1. Brad says:

    Carolyn,
    Thank you for this information I’ve just thought about this on the wordpress site I’m going to add to my site. Many thanks.

    I do have an issue that I haven’t resolved on another site that we are just putting up. When I add static pages I get the pages as menu items at the header. I need to know if there is an easy way to control pages that are displayed, it is likely that we will have 12 to 20 static pages and I do not need all of them as top level menu items.

    Code, plugin, settings? So far I haven’t jumped to far into it, wanted to know if you had a simple straight forward solution as you give here. Oh, and in your intro to WP 2.7. Excellent presentation.
    Thanks

    • carolyn says:

      Brad,

      Glad to be of help. It seems there I’m writing more and more about WordPress and there are several new developments, so I’m going to be doing some more posts later this week. The new WordPress.tv site is very exciting and I hope helpful to all of us using WordPress.

      Regarding your static pages in the header navigation, these are controlled by a chuck of HTML and PHP code. You can remove the WordPress loop and create static links to any specific pages you wish, for example, Home and Contact Us and then add the page listing loop in your sidebar navigation with your categories. If you are using the sidebar widgets, you will see one for Pages that will automatically add the list of pages to the sidebar. In your current header.php template you are looking for a chunk of code similar to this;

      < ?php wp_list_pages('title_li='); ?>

      The operative bit to search for is the “wp_list_pages”. What this code does is run a loop that reads the title of each WordPress page you’ve created and writes it as a list item. How the list item looks is controlled by your style sheet. Yes, there are ways to tell the automatic loop to exclude specific pages, but that is probably more complex coding than you want to so right now. I use the technique to exclude things like “Thank you for shopping” and “You’re request did not complete” an so forth. In most cases, people only wish to have a few static pages listed like “Home”, “Contact Us” and “About Us.”

      Which leads me to my next point. Why are you needing so many static pages? Usually, when someone tells me they have a lot of static pages, I find that many of these pages should actually be posts that are aggregated into a category. For example, I worked with one person who had been thinking she needed all kinds of static pages for client forms, client worksheets, instructions for specific products, terms & conditions, legal disclaimers, company history and so forth. By putting the client forms and worksheets into a category called “Documents” and moving all the legal, cya, history, staff bios and such into a category labeled “About Us”, the client was able to make her navigation cleaner, easier to follow and it allowed her a great deal more flexibility in adding new material. Is there some way you can collect much of these static pages into a category and convert them into posts?

      If you find yourself down to just 1 or 2 pages that you want excluded from your page navigation, let me know and I’ll walk you through how you can exclude a page from your wp_list_pages loop.

      And thanks again for visiting the site and the kind words about the Beginner’s Guide to WordPress 2.7. Please check back soon for the new posts and please spread the word to others.

  2. Brad says:

    Carolyn,

    Many Thanks,

    I discovered several plugins that make the navagation menus easy to handle. The one I’m working with on my wifes site, youryogasource.com is WP Multi-level Navigation Plugin. Adding n a simple line of code to the header file and then managing the menus with the plug in. It has much more than needed and was a easy solution.

    I think we can still clean it up a bit in the next round of content additions.

    Also I upgraded into a premium theme for to use on two other sites and have learned a lot about what you talk about. That theme has menu control built into it and should make it easier to simplify navagation.

    We decided on the WP platform as a CMS and to build the site, not necessarily as a Blog only. The static pages are ones we wanted as intro to the site themes. Posts in related categories will be used for new material as you suggest.

    If you write more on WP, I’d like to see optimazation of the settings category.

    Look forward to more of your info.

    • carolyn says:

      Brad,

      Funny you should mention optimization of the settings…that’s exactly what I’m working on for my Intermedia WordPress class. I’m also hoping to start doing the tutorials as videos and slideshows, which many people prefer. It’s a matter of time to find a screen recorder program I like.

      It sounds like you are doing great things. I am a fan of premium themes because they offer so much more in the way of customization without coding for folks who don’t like hacking code. I consider them bargains for the price!

      Thanks for your comments and suggestions.

  3. Daniel says:

    Great post, Caroline. Thank you.

    I’ve replaced the header image with a single image of the same size but would prefer to replace the header image with three or four images to run across the top to fill the same space.

    Would you know how to do this though editing of the html code in the header.php?

    Thanks.

    Best,
    Dan

    • carolyn says:

      Dan,

      Thanks for the kinds words. There are several ways of replacing a single image with multiple images depending upon the actual header.php layout and code. The easiest is to wrap the images in a tag that defines in the CSS code the length, margins, padding, borders and so forth for the space in which the images are being placed and then placing multiple images. For example,


      < div id="header">
      <img src="image1" alt="" /><img src="image2" alt="" /><img src="image3" alt="" /><img src="image4" alt="" />
      < div id="header"/>

      You might choose to specify the width of each image to speed up loading but make certain the total widths add up to nothing larger than the maximum width of your current image.

      The CSS might look something like this:
      #header {
      width: 760px;
      height: 151 px;
      padding: 0;
      }

      #header img {
      margin: 0;
      padding: 0;
      border: none;
      }

      I took a look at your current site and did find a problem with your HTML, however. Your header tag includes the closing tag attribute. It shouldn’t do this. Basically, you are opening and closing your header division with nothing in between. This is treating it like a singleton tag. A singleton tag is an HTML tag that opens and closes in a single line. Very few tags should do this. The two most common are the break tag <br /> and the image tag <img />.

      Right now the code looks like this:


      < div id="header"/>
      <img id="frontphoto" height="151" width="760" alt="" src="http://youngandfoodish.com/wp-content/themes/wp-andreas01/img/finn.jpg"/>

      It should look like this:

      < div id="header">
      <img id="frontphoto" height="151" width="760" alt="" src="http://youngandfoodish.com/wp-content/themes/wp-andreas01/img/finn.jpg"/>
      < div id="header"/>

  4. Mike says:

    Brad,

    I loved your post and attempted to do everything as you layed out for changing the image when it is a CSS tag. However, after doing it all like you posted, it still did not work. Here is what the style.css code shows:

    #masthead {
    position: relative;
    top: 0px;
    background: url(‘images/masthead.jpg’);
    width: 700px;
    height: 225px;
    margin: 0px;
    margin-top: 0px;
    }

    I found that I could actually delete the file called “masthead.jpg” altogether from the images folder within the theme (via ftp folder) … but that didn’t change it either. This leaves me to believe that it is somehow pulling the image from a different url than what the code shows above. Could that be possible?

    Thanks!
    Mike

    • carolyn says:

      Mike,

      Thanks for reading and writing. Hmmm, if you are deleting the file named “masthead.jpg” in yourdomainname/wp-content/themes/the-name-of-your-theme/images/ , you should be getting rid of the image in your <div id="masthead"> section. There are a couple of possibilities and a test you can run.

      The hard code way to solve the problem is to remove the background url call entirely. You can do this by either deleting the line from the CSS tag or you can test it by commenting it. To comment out a line of code in CSS, you want to wrap it in /* and */ like this:

      #masthead {
      position: relative;
      top: 0px;
      /* background: url(’images/masthead.jpg’); now this line of code will be ignored */
      width: 700px;
      height: 225px;
      margin: 0px;
      margin-top: 0px;
      }

      Or, as I said, you can simply delete that line from your CSS. If you do that and you still see your background image, it means one of 2 things:

      1. The first thing to check is to make absolutely certain you are changing the correct theme and the correct style sheet. (Some themes have more than 1 style sheet and the last style sheet loaded tops the first one. I have run across a couple of themes where they load or add custom styling after linking the standard style.css.) I’ve done this. I’ve worked hard at editing a theme and got very frustrated when my changes didn’t appear to have any affect on the browser display and then discovered I had been working on the wrong style sheet.

      2. If you are working on the correct style sheet, then it means that the page has been cached. If you have installed and activated the plugin WP Super Cache you won’t see any changes to your theme. I had a student do this in my last class on essential WordPress SEO. We had been learning how to add new plugins and discussing using WP Super Cache if you ran into a load speed problem with your site — so naturally, she’d installed it while we were looking at other plugins. Since the next thing we looked at was editing our style sheets in the WordPress Theme Editor, it caused a small problem. The problem was solved when she deactivated WP Super Cache, cleared her browser cache and re-loaded the page.

      So remove the background line in the correct css, make certain you have cleared your browser cache and then reload the page.

      A great way to troubleshoot whether you are working on the wrong style sheet or have a cached page problem, is to change the color of you css body tag to something like color: #ff0000; — which will make all of your standard text red — and add some new text to your index.php or footer.php template like “IF YOU CAN READ THIS THEN THE PAGE IS NOT CACHED!”

      I hope this helps solve your problem and thanks again for visiting, Mike!

  5. chaim klein says:

    Thanks alot for this you just helped me out change the header of theme. thanks alot.

  6. Warren says:

    Hi Carolyn

    Thanks for you very helpful tips and informative answers to questions. I am in the very early stages of building my WordPress blog and with your help I was successful in replacing the default header with my own. The problem I now face is that my new header contains my blog title, so I want to hide the default blog title and tag line from display. (they now overlap) Is there a “coding” way to do that other than blanking them out in my general settings?

    Your advice would be most helpful

    Thank you
    Warren

  7. Jay M. says:

    Anyone where I can start my own blog.

    • carolyn says:

      Jay, there’s always WordPress.com (remember .com is for creating your own blog) or Google’s Blogspot. Also, Live Journal is still alive and I know a number of bloggers have stayed with them.

  8. Renee says:

    I created my own image for my blog, uploaded in godaddy cpanel. i also edited the stylesheet on the wordpress site, but the changes have not been reflected on the site. I uploaded 2 new .png files on the cpanel (lifestyle_40-2/IMAGES) folder and they appear to be there. Can you tell you why it is not updating the stylesheet?

    the file that the image is in ends in (.png) not (.jpeg)

    Help!!!! I’m lost

    • carolyn says:

      Renee,

      Usually, if images have been uploaded and the stylesheet or theme has been edited, but the images don’t appear, it’s a path problem. What do I mean by a path problem? This is when the images are not in the sub-directory that the browser is told to look. Also, you may want to use a .jpg image instead of .png if you are using Internet Explorer (IE) for your browser. While the newer versions of IE supposedly support the .png format, I have had a number of people report problems, particularly with the older versions.

      However, let’s take a quick gander at your path issue.

      Step 1
      First, you didn’t mention what theme you are using. Different themes use different approaches to customizing stylesheets. Some do everything in the style.css. Others use a base stylesheet and them make a call to a customized stylesheet. And then some have a basic stylesheet and then modify the header.php file in the section to add customized styling. For example, Magicblue specifies the background images in the header.php file instead of style.css. Alas, there is no consistent way to handle styling. So the first thing you need to do is identify exactly what code needs changing. The easiest way to do this is make a clear change. For example, if the stylesheet has something like this:

      body{
      background: #fff url("/images/bodybg.gif");
      }

      try removing the url("/images/bodybg.gif") and changing the #fff to read #f00 (this should make the background bright red). If you see the changes where you expect them, then you have identified the style you need to change.

      Step 2

      Now, you need to make certain that the path to the image is the directory where the image actually is. Did you notice the code that read url("? This is code for the theme path — the path to the theme directory that is specified as the active theme in the WordPress Administration. This is usually the best way to specify the first part of the path because it means you don’t have to do a lot of code changes every time you want to change the background image.

      The second part of the path in my example is the part that reads /images/bodybg.gif". This tells the browser that the image bodybg.gif is located in the images directory inside the theme directory. You may need to add the Unix relative path code: ../, so that the full path will read: url('../images/bodybg.gif'). This is one of the first things to try if your image is in a sub-directory inside your theme directory.

      If you don't use this code, you have specify exactly the full path to the image. If I were to write out the full path to the bodybg.gif image in the Magicblue theme for my website it would read: url("http://carolynecooper/wp-content/themes/magicblue/images/bodybg.gif"). Ouch! Way too much work.

      The Lazy Person's Solution

      I am much too lazy to make all those changes in my stylesheet, so if I all I want to do is swap one background image for another, I do this:

      1. Identify exactly which image I want to change. In my example, I want to change "bodybg.gif".
      2. Make my new image the exact same size and, ideally, the exact same format, as bodybg.gif.
      3. In my Magicblue Theme /images directory, I make a copy of bodybg.gif (usually by simply re-naming it something like original-bodybg.gif).
      4. Upload my new image into the same Magicblue Theme /images directory and name it bodybg.gif.

      This way I don't have to change any of the code. I just have to rename the original image and upload my new image.

      Slight More Complex Solution

      1. Identify the image that you want to change.
      2. Make my new image the exact same size and whatever format I need (usually ,jpg or .gif until all of the browsers catch up to .png).
      3. Upload my new image (let's call it new-bodybg.jpg) in the same directory as the current image (in my example case, the Magicblue /images directory where bodybg.gif resides).
      4. Change the stylesheet code so that instead of url("/images/bodybg.gif"), it reads url("/images/new-bodybg.jpg").

      Double check the name. It's case-sensitive and file format sensitive so everything must match exactly.

      I hope that helped. If you are still having a problem, please include the stylesheet or template code that you are trying to change as well as the full path of your new image.

      And thank you for visiting the site.

  9. Britt says:

    Hi there,
    I’m wayy new to this blogging/wordpress world. I’m having a hard time figuring out how to customize my header in wordpress using the theme- Starstruck.
    I have read what you wrote….
    “This is the line that specifies that the background for this division is the mainbannerimage.gif found at the URL the-path-to-your-wp-content-themes-theme-name/images. Unless a full URL path is specified, the CSS will start with the directory in which it resides. So you now know where the image you want to replace is stored: your-Wordpress-path/wp-content/themes/your-theme/images. Download the image and make your new image the same width and height.”
    1. Where do I find the directory where all images reside?
    2. The host of my site is bluehost. I do see a cpanel area there. Is this where the directory is?
    3. I’m fine using Photoshop and have changed up the original header image; but don’t know how to upload it (I can find the theme files on my computer…duh, because I had to download the theme… but if I change any of those images… like the header… it doesn’t change anything on my site).

    Totally need some clarification and help. Again, newbie- I need to be talked to like I’m a 1st grader. =)
    Thanks for any and all help!

    • carolyn says:

      Okay, Britt, let’s see if I can help. First, congratulations on creating a new header image in Photoshop. Second, I searched wordpress.org and didn’t find the Starstruck theme so I figure you got it from so other place.

      So let’s see if I can do this blind.

      1. You need to look through the directories on your server until you find wp-content (it may be inside one call www or public_html). Then look inside that directory for another one named themes and inside that directory look for one named starstruck and finally inside that directory look for one named images. So once you find your web directory (which has your index.php and the rest of your WordPress files and directories), the path is:
      /wp-content/themes/starstruck/images

      2. Now inside that /images directory, you should be able to find the header image. My suggestion is to rename the header image file to something like original_header_image and then name your header image file the former name of the header image. For example, in the Second Chance theme the header image is called kubrickheader.jpg, so I’d rename it original_kurbrickheader.jpg and name my image file kubrickheader.jpg.

      3. Now upload your header image into the /wp-content/themes/starstruck/images directory on your bluehost web server.

      This will save you from having to actually change the code in your WordPress theme header.php file. I always like it when I can avoid changing code. It’s safer.

      FYI, you can look for Starstruck header image in the copy on your computer to find the name.

      I hope that helped. And good-luck.

  10. Jim Yount says:

    good job on this site! I really respect what you’re trying to do, and hear good things about your skills. In reading the content, I’m reminded of how tough it used to be to do things like change a header image, before WordPress 3.X came along. I’m not seeing much mention of the “new way” of addressing CSS hacking, (so that it survives theme updates) or of new features (the “featured image” is one that I’m using all the time now). Have you had time to dig into this 3.X stuff? Or has it just not gotten on line yet? Can I help? I’m in Sequim xxxx (edited to avoid spammer calls); my better half is right this minute taking your SEO class (Mary Anne Lauby).

    • carolyn says:

      Jim, thanks for your feedback. Yes, I’m behind on my planned site updates. I’ve been stuck in hospitals on the East Coast caring for a family member since around June. The plan is do a re-design for the New Year once my classes finish. One of the things I hope to address is the custom.css technique of doing theme modifications as well as the custom templates, both of which should survive most WP & theme upgrades. Glad to find another WordPress enthusiast in the area. I think you’ll like my forthcoming material for folks just getting started online. Let’s here it for WP Frameworks!

  11. Ridhim says:

    Thanks carolyn For this post.
    It was very helpful to me. *Smiles* :)

  12. jake says:

    hey i have looked every where but im not sure how to change the header image on this theme. here is the header code if that helps, any help much appreciated

    <meta http-equiv="Content-Type" content="; charset=” />Tag Archive for archive Search for | <meta name="generator" content="WordPress ” /> <link rel="stylesheet" href="” type=”text/css” media=”screen” /><link rel="shortcut icon" type="image/png" href="/favicon.png” /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="” /><link rel="alternate" type="text/xml" title="RSS .92" href="” /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="” /><link rel="stylesheet" type="text/css" href="/css/sweetTitles.css” media=”screen,projection” /><script src="/js/addEvent.js” type=”text/javascript”><script src="/js/sweetTitles.js” type=”text/javascript”><link rel="pingback" href="” /><a href="”><a title="Home is where the heart is."href="”>Home<a title="Essentials about me and the preferences."href="/about/”>About<a title="Full archives." href="/archive/”>Archive<a title="Reach out and touch somebody. How to get in contact with me."href="/contact/”>Contact <a title="Syndicate" href="/feed”>RSS

    • carolyn says:

      Jake, you’re looking in the section, not the header.php file. The section can be found in the header.php file, but what you really need to look at is the stuff immediate after the tag, often in a tag with a style called #wrap or #header. And you also have to look at the stylesheet code for those elements. For example, I checked out the URL you posted with your site and found the Body element stylesheet contained this:
      body {
      font: 11px/165% 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
      color: #5B5B5B;
      margin: 0;
      padding: 0;
      background: #070707 url(images/bg.jpg) no-repeat center top;
      text-align: center;
      }

      See the images/bg.jpg?

      Since I’m not seeing any other I suspect that’s your culprit and you need to go into your theme images file and change it.

      I hope that helps.

  13. I understand the principal of changing images but you never explained how one accesses the server directory to do the switch. In this case the image “sunset.jpg”.

    • Here is the location: img src=”http://s1.wp.com/wp-content/themes/pub/twentyten/images/headers/sunset.jpg?m=1308177897g” width=”940″ height=”198″ alt=”" /

      • carolyn says:

        Ah, you are using the TwentyTen theme. You have a much easier time. The TwentyTen WordPress theme has additional administration features that allow you to change your header image without using an FTP program.

        In your WordPress Administration navigation menu, look under Appearance and you should see the option Header. Click on Header.

        Here you will see the default images provided with the TwentyTen theme (including sunset). You will also see an option right above those Default Images called Upload Image. You will see instructions that tell you that you an upload a 940 x198 pixels image.
        Create your 940 x 198 pixels image and click on the Choose File button. Select your new image from your computer then click the Upload button.
        Once your new image has uploaded, the TwentyTen theme will use it instead of any of the Default Images.
        To change the image, select a Default Image or upload a new image.

        Easy-peasy!

    • carolyn says:

      Henry, you have to ftp the new image to the directory where the old image is (at least is you are doing it the easy way without changing the WordPress code). FTP stands for File Transfer Protocol and requires logging into your server directory with an FTP program.

      Most hosting services offer a Control Panel or Manager of some kind that let’s you log into your account and upload files to your web server. If so, you can load your file that way.

      If you are going to be loading a lot of files over time, you should use an FTP program. There are a lot of FTP programs available. If you’re on a Mac, Cyberduck is a quick, easy solution. I’ve used Fetch since it first came out and still fire it up for a lot of project.

      Once you have your FTP program installed on your computer, you will connect to your web server by providing your hostname (usually your domain name such as carolynecooper.com), your username and your password. Some hosting services provide a different username and password for your FTP access, so read your instructions/FAQ from your hosting service (or check with tech support).

  14. Elaine says:

    You can do that without needing any code. I think it’s more efficient to use a flexible theme editor. I use Lubith for example and it provides me with great tools and customizing options. When it comes to the header for example you simply select it, add/remove background image or color, you can add borders or round corners, you can set opacity, add/remove site title/description/menu or add logo.

    • carolyn says:

      Yes. If you look at the date this post was originally written, you’ll see that it’s from the time when there were no flexible themes with headers options. Today we have many choices which is why I recommend the professional themes listed in the sidebar. They provide state-of-the-art, multi-platform ready, professionally designed themes with various levels of control and customization.

  15. John says:

    Hi Carolyn, I know this is an old subject, but I have a slightly different question about this subject, I was wondering if you know how to make your suggested changes to the header images become automated for seasonal header changes?

    I’ve uploaded a few different header images for different holidays/seasons and can make any of them show correctly by manually editing the style.css page to:

    background:url(images/bgr_header_Summer.png) no-repeat center top;

    where “Summer” above is changed to Spring, Summer, Fall, Halloween, Christmas, Winter, Clover, etc. depending on time of year and what header I want to be shown.

    I was wondering if you know how I can make this an automated feature based on the date (current time of year, not the date of a post)? I’ve found many sites that try to help but they don’t seem to be compatible with the theme that I am using. The only way to change my header image is by editing the style.css code above and I don’t know how to code it to be automated.

    Thanks for your time.

    • carolyn says:

      John, there are several ways to do this, but all of them would require quite a bit of php coding and frankly, it would take you a lot longer to code than to simply change them when you wish with a simple css edit. Other options would require doing something like creating a custom post type with the post scheduled to publish at certain dates and custom coding in the header to display the custom post type, which again would take longer and more effort than simply changing your css when you want to change your seasonal header.

      Which brings me to a topic I plan to write about in depth soon, best use of your time. If you are a WordPress theme developer or programmer then building a theme with a plugin function that allows people to set up header images for timed rotation would be worth your time and effort, however, if you are a business owner or non-profit organization, your time is much better spent working on developing content that demonstrates why your target audience should give you money. And no one ever made that decision based on seasonal header images, especially automatically changing header images. And then comes the question of what value these header images provide if they are created months in advance and aren’t relevant to whatever is happening with you business or organization when the changes occur. Wouldn’t you be much better off creating header images that tout whatever you are wanting to promote at that time?

      Just want to suggest that you may want to look closely at your goals and the most effective and efficient way to achieve them.

  16. Great, simple explanation on changing the Logo etc. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>