WordPress.org

1. BigScaryRobot
   Member
   Posted 3 years ago #

   Is there a way to have a different header image load for every time someone visits the site? Is there fairly simple code for something like that?

   Here's my header code from stylesheet.php:

   /* Header and wrapper */
   #wrapper {
     margin: 0 auto;
     width: 960px;
     text-align: left;
     padding: 0;
     }
   
   #header {
     padding: 0;
     margin: 0;
     height: 80px;
     }
   
   #header #topright {
     text-align: right;
     float: right;
     width: 600px;
     margin: 5px 0 0 0;
   }
   #header #topright ul {
     list-style: none;
     padding: 0;
     margin: 0;
     }
   #header #topright li {
     display: inline;
     }
   #header #topright li a {
     color: #fff;
     font-size: 9pt;
     padding: 0 0 0 25px;
     text-transform: lowercase;
     }
   #header #topright li a:hover {
     color: #000;
     text-decoration: none;
     }
   
   #header #logo {
     background:url(images/logo.gif) no-repeat;
     height:100%;
       float: left;
     width: 977px;
     height: 160px;
     margin: 25px 0 0 0;
     padding: 0;
   }
   #header h1 {
     padding: 0;
     margin: 0;
     }
   #header h1 a {
     color: #fff;
     font-size: 17pt;
     text-decoration: none;
     }
   #header h1 a:hover {
     color: #eee;
     text-decoration: none;
     }
   #header span {
     padding: 0;
     color: #111;
     font-size: 11pt;
     }

   Thanks!

2. tugbucket
   Member
   Posted 3 years ago #

   lots of ways. here's one:

   <style type="text/css">
   #header #logo {
   background: <?php
   $stylesarray = array("logo1","logo2","logo3");
   $random = $stylesarray[rand(0,count($stylesarray)-1)];
   echo "url(images/".$random.".gif);"
   ?>
   }
   </style>

   the array is all names of the images. on load it just randomly chooses one and slaps it in the CSS. Put this in your head after the link to your CSS file.

3. BigScaryRobot
   Member
   Posted 3 years ago #

   I'm sorry, do I put that code in header.php or stylesheet.php? I'm still pretty new to all this code.

4. tugbucket
   Member
   Posted 3 years ago #

   in your header.php right before this line: <?php wp_head(); ?> that way the new background image will over ride the one in your sttylesheet

5. BigScaryRobot
   Member
   Posted 3 years ago #

   Thanks so much!

   Is there a limit to how many images I can rotate?

6. tugbucket
   Member
   Posted 3 years ago #

   nope, go crazy!

7. Syed Balkhi
   Member
   Posted 2 years ago #

   Another way of doing so which generates the same output is shown below:

   http://www.wpbeginner.com/wp-tutorials/how-to-add-random-header-images-to-your-wordpress-blog/

Topic Closed

This topic has been closed to new replies.