{"id":97414,"date":"2012-09-15T10:00:14","date_gmt":"2012-09-15T14:00:14","guid":{"rendered":"http:\/\/wpmu.org\/?p=97414"},"modified":"2013-04-19T14:46:57","modified_gmt":"2013-04-19T18:46:57","slug":"wordpress-rotating-header-images","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-rotating-header-images\/","title":{"rendered":"How to Get WordPress Rotating Header Images"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-97416\" title=\"wordpress-rotating-header-big\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/wordpress-rotating-header-big.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"703\" height=\"526\" \/><br \/>\nHeaders have come a long way in WordPress. It wasn\u2019t so long ago now that the ability to add a header image from the Admin area was added.<\/p>\n<p>But there are still some things that some people want from their headers that they just can\u2019t always get out-of-the-box (depending on their theme).\u00a0 One of those things is rotating headers and\/or random header images.<\/p>\n<p>In this post we\u2019ll go over a few solutions that will help you get rotating and random images.<\/p>\n<h2><strong>Built-in Random Headers<\/strong><\/h2>\n<p>The first thing to mention is that some themes do already have the ability to rotate images or show different images on every page. So you\u2019ll want to make sure you check your theme first.<\/p>\n<p>Here is the random header section for the default Twenty Eleven theme, for example.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-97418\" title=\"built-in-random-headers\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/built-in-random-headers.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"597\" height=\"424\" \/><\/p>\n<p>With some of the more sophisticated themes, you might have to look around a little in order to find a rotating header function. It might not be located where the header section is in more basic themes.<br \/>\n<\/p>\n<h2><strong>Header Image Rotator Plugin<\/strong><\/h2>\n<p>The first add-on solution is a plugin called the <a href=\"http:\/\/wordpress.org\/extend\/plugins\/cimy-header-image-rotator\/\" target=\"_blank\">Cimy Header Image Rotator<\/a>.<\/p>\n<p>This plugin allows you to rotate images (header images in particular) and control them as you like in the settings. You can set the timing of the transitions and the style of the trasitions.<\/p>\n<p>Here\u2019s a look a few of the effects and attributes.<\/p>\n<ul>\n<li>Static transition<\/li>\n<li>Fade transition<\/li>\n<li>Slide effect<\/li>\n<li>Ken Burns effect (as it\u2019s called \u2013 panning and zooming)<\/li>\n<li>Links from each image<\/li>\n<li>Captions for images<\/li>\n<\/ul>\n<p>With this plugin you will need to get your hands a little dirty in the code of your theme. Specifically, you will need to find some code in your header.php (Appearance &gt; Editor &gt; Header \u2013 header.php) and replace that code with code provided by the plugin.<\/p>\n<p>The plugin author has provided a video with instructions on how to do all this. In fact, it\u2019s the only instructions. We will include it below, but there is also a link to it on <a href=\"http:\/\/wordpress.org\/extend\/plugins\/cimy-header-image-rotator\/installation\/\" target=\"_blank\">the plugin\u2019s installation page<\/a>.<\/p>\n<p>One thing to note about the video. The plugin author recommends installing the Firebug plugin for Firefox in order to help find the code that you need to replace. You might first simply try to find the following in your header.php file.<\/p>\n<pre>img src=<\/pre>\n<p>That piece of code should lead you to the general section that you will need to replace. NOTE: \u201cimg src=\u201d is not the ONLY piece of code you\u2019ll need to replace. See the video to help you decide which code to replace in your theme.<\/p>\n<p>Here\u2019s a look at the settings page to help you get a fuller idea of what\u2019s available with this plugin.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-97420\" title=\"cimy-header-image-rotator-settings\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/cimy-header-image-rotator-settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"597\" height=\"783\" \/><br \/>\nAnd here\u2019s a look at the instructional video.<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><span class=\"embed-youtube-lazy-id dev-hidden\">vpq4U3h1BPY<\/span><\/span><\/p>\n\n<h2><strong>Manual Header Rotator Solution<\/strong><\/h2>\n<p>The next solution comes from a post that Chris Pearson <a href=\"http:\/\/www.pearsonified.com\/2006\/10\/simple_random_header_images_for_your_blog.php\" target=\"_blank\">wrote on his blog personified.com<\/a>.<\/p>\n<p>Although the code and some explanation are provided in the blog post, it\u2019s a little lacking in some explanation for those that aren\u2019t very familiar with WordPress, and so we\u2019ll go over it here and add in a little more explanation for those who might need it.<\/p>\n<p><strong>Make Your Header Images<\/strong><\/p>\n<p>First you will want to <a href=\"https:\/\/wpmudev.com\/blog\/how-to-make-a-header-for-your-wordpress-site-with-free-graphics-tools\/\" target=\"_blank\">make up all your header images<\/a> and name in the following way (including as many as you like, of course):<\/p>\n<ul>\n<li>header_1.jpg<\/li>\n<li>header_2.jpg<\/li>\n<li>header_3.jpg<\/li>\n<li>header_4.jpg<\/li>\n<li>header_5.jpg<\/li>\n<\/ul>\n<p>Be sure to make these images the same size of the header images for your theme.<\/p>\n<p>Next you\u2019ll want to upload all of these images to the <strong>same folder<\/strong> on your site. If you use the Media Library in your admin area, be aware that most sites by default put images in folders based on dates. So, for example, the URL of an image might look like this (notice the dates \u2013 those are actually folders):<\/p>\n<pre>http:\/\/mysite.com\/wp-content\/uploads\/2012\/09\/header_1.jpg<\/pre>\n<p>This is fine, but the potential problem is that once you&#8217;ve moved to a different month, it\u2019s a little more difficult to upload images to that same folder (in this case the 2012\/09\/ folder). You would need to go to your server to do it.<\/p>\n<p>But there\u2019s a simple solution to that issue. You can go to your media settings and choose to NOT organize your uploads by date. Go to Settings &gt; Media &gt; uncheck \u201cOrganize my uploads into month- and year-based folders.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-97421\" title=\"media-settings\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/09\/media-settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"596\" height=\"422\" \/><\/p>\n<p>Once you do that, your upload URLs will look like this:<\/p>\n<pre>http:\/\/mysite.com\/wp-content\/uploads\/header_1.jpg<\/pre>\n\n<p><strong>Replacing Code in Your Header<\/strong><\/p>\n<p>Next you\u2019re going to need to replace some code in your header.php file. (Appearance &gt; Editor &gt; Header \u2013 header.php)<\/p>\n<p>The easiest way to look for this code is to search for a unique part of it, the part that looks like the following:<\/p>\n<pre>img src=<\/pre>\n<p>The \u201c<em>img src=<\/em>\u201d bit tells you the \u201cimage source.\u201d \u00a0That\u2019s not the only part you will need to replace, but that should lead you to the section you need to replace.<\/p>\n<p>The complete section you need to replace is going to vary by theme. When I search for \u201c<em>img src=<\/em>\u201d in the default Twenty Eleven theme, for example, I find this:<\/p>\n<pre>&lt;img src=\"&lt;?php header_image(); ?&gt;\" width=\"&lt;?php echo HEADER_IMAGE_WIDTH; ?&gt;\" height=\"&lt;?php echo HEADER_IMAGE_HEIGHT; ?&gt;\" alt=\"\" \/&gt;<\/pre>\n<p>I am going to want <strong><span style=\"text-decoration: underline;\">to replace that whole section with some new code<\/span><\/strong>. Here\u2019s the MODEL of the new code (you will still need to change some of this):<\/p>\n<pre>&lt;img src=\"https:\/\/path_to_images\/header_&lt;?php echo(rand(1,5)); ?&gt;.jpg\" width=\"image_width\" height=\"image_height\" alt=\"image_alt_text\" \/&gt;<\/pre>\n<p>In this bit of code above, you will notice part of it says <em>path_to_images<\/em>. You will need to replace that with the path to your images. So, for example, if our image URLs look like this \u2026<\/p>\n<ul>\n<li>http:\/\/mysite.com\/wp-content\/uploads\/header_1.jpg<\/li>\n<li>http:\/\/mysite.com\/wp-content\/uploads\/header_2.jpg<\/li>\n<li>http:\/\/mysite.com\/wp-content\/uploads\/header_3.jpg<\/li>\n<li>http:\/\/mysite.com\/wp-content\/uploads\/header_4.jpg<\/li>\n<li>http:\/\/mysite.com\/wp-content\/uploads\/header_5.jpg<\/li>\n<\/ul>\n<p>Then I\u2019m going to want to place the following in that <em>path_to_images<\/em> section:<\/p>\n<pre>mysite.com\/wp-content\/uploads<\/pre>\n<p>Therefore, my actual code would look like this:<\/p>\n<pre>&lt;img src=\"https:\/\/mysite.com\/wp-content\/uploads\/header_&lt;?php echo(rand(1,5)); ?&gt;.jpg\" width=\"image_width\" height=\"image_height\" alt=\"image_alt_text\" \/&gt;<\/pre>\n<p>You will also noticed another section in that piece of code with some numbers that looks like this:<\/p>\n<pre>(rand(1,5))<\/pre>\n<p>This will randomly choose your images based on the last number in their names from 1 to 5. \u00a0Therefore, if you have only three images, then you\u2019re going to want to change that section to look like this:<\/p>\n<pre>(rand(1,3))<\/pre>\n<p>If you have 20 images, then you\u2019re going to want to change it to look like this:<\/p>\n<pre>(rand(1,20))<\/pre>\n<p>And that\u2019s it. Save your header.php file, and you should now be getting random images loading on different pages, spicing things up for your visitors, and making things just a little bit fresher all the way around.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Spice up your site by giving visitors a fresh header image on every click.<\/p>\n","protected":false},"author":84404,"featured_media":97417,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[4779],"tutorials_categories":[],"class_list":["post-97414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-headers"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/97414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=97414"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/97414\/revisions"}],"predecessor-version":[{"id":216365,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/97414\/revisions\/216365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/97417"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=97414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=97414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=97414"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=97414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}