Pinter Computing

Have you ever wanted to display specific images on certain dates in the header of your WordPress page like Google does?

If you want to automatically set the header image based on the date there is an easy way to do it. This way you can display a prepared image on certain dates like Independence Day, your birthday, or as in this example on the International Women’s Day, March 8th.

In the original Witcher World WordPress theme there are two ways to display header images: one selected image or a random image from multiple uploaded header images.

If you have access to your site via FTP and are not afraid of changing some PHP script in your Witcher World WordPress theme follow the simple steps below:

• Upload a 988 pixel wide and 300 pixel high image to the “images” folder of the your Witcher World WordPress theme
  • Name the image “header_womens_day.jpg” (without the quotes)

 

• Log into your WordPress site as an administrator,
• On the left side click “Appearance” and “Editor”,

 

• On the right side select “Header”,

 

• In the editor find the following line. That sets the header image of the theme.

<div id=”header”<?php if(get_header_image() != “”) echo ” style=’background-image: url(“.get_header_image().”);'”; ?>>

 

• Replace it with the following script:

<div id=”header”
<?php
$today = date(“m-d”);
$templatedir = get_template_directory_uri();
$background_image_url = “”;
if ( “03-08″ == $today ) {
// Women’s day
$background_image_url = $templatedir.”/images/header_womens_day.jpg”;
} elseif (get_header_image() != “”) {
$background_image_url = get_header_image();
}
echo ” style=’background-image: url(“.$background_image_url.”);'”;
?>
>

 

• At the bottom of the page click the “Update File” button

 

On every March 8th the “header_womens_day.jpg” image will be your header image. The  date(“m-d”) function returns the month and day in the  UTC time zone, so you will only see the change when it is March 8th in London (8 hours ahead of Los Angeles).

 

When you upload an image for a page or a post WordPress stores the image at the following location:

wp-content\uploads\YEAR\MONTH

where YEAR and MONTH are the year and month of the upload date.

WordPress creates a new folder every month to reduce the number of files per folder. This way you can find your files easier and the server can also find the files faster, because it can work with a smaller list of directory entries.

When you upload an image as a theme header images the image will be stored in the Media library.

If you upload multiple header images and you want to remove some of them

• Log into your WordPress site as an administrator,
• On the left side select “Library” in the Media menu,

• Click the “Delete permanently” link next to the unwanted image

• Click “OK” to confirm the deletion of the file.

The Witcher World is a great theme and it is very easy to customize it. The original header image is beautiful, but if you want to display your custom header image you have to take some simple image editing steps to make sure it looks as good as the original.

The original image contains the left and right borders of the header, so if you add your image you have to add those to your custom image.

Create the custom header image

Click the image below to open the header image template with transparent areas for your custom image in a new tab of your web browser. On the new tab right click the image and select “Save image as…” (“Save picture as…” in Internet Explorer) and save the image to your computer. When it is done close  the new tab to return to this page.

 

Select a picture on your computer that you want to use as the header image. The following steps show how to do it in Colrel Paintshop Pro XI. All other graphics editor programs should have similar feature to do the same.

• To resize the image to 988 pixel wide select “Resize” in the Image menu

• Set the width to 988 pixels and check the “Lock aspect rato” to set the height automatically and avoid distortion, and click OK,

• In the View menu select “Zoom to 100%” to see the larger view of the image,

• To crop the image to 988 wide  and 300 high on the left side select the crop icon and in the header enter 988 pixel width and 300 pixel height,

• Move the crop rectangle to the desired place and click the “Apply” button on the header,

• Set the background color to blue to enable the transparency during the paste of the template,

• Double click the background color indicator,

 

• • Click the blue color and click OK,

• Open the Witcher_World_header_transparent_template.png in the same application,
• In the Selections menu click “Select All”

• In the Edit menu click “Copy”,

• Switch to the cropped image by selecting the file in the Window menu,

• Paste the Witcher_World_header_transparent_template.png on top of it as a “Transparent selection” exactly on top of your cropped image,

• Save the new composite image on your computer. Click Yes to allow Paint Shop Pro to merge the parts of the image.

Upload the custom header image

• Log into your WordPress site as administrator,
• On the left side select “Appearance,” and “Header”,

• On the middle pane in the Select Image section select “Choose File” under Choose an image from your computer,

• Select the new file and click the Open button,

• Click the “Upload” button on the page,

• You can upload multiple images and select  “Random: Show a different image on each page” in the Uploaded Images section to display a different image at every page load.

• Click the “Save Changes” button at the bottom of the page.

It really takes five minutes to set up WordPress.

If your site is hosted by an other Internet  Service Provider the process can be slightly different than the steps below, but it should be similar enough to be relevant to your situation.

If your site is hosted by Winhost.com

• Log into your Winhost control panel at www.winhost.com
  (When you set up your site they gave you a user name and you selected a password to access the account administration pages)
• On the main menu select “Sites” to administer you web site

 

• On the Site List select the “Manage” link next to your site

• On the Site Manager window select the “App Installer” icon

• In the list of applications scroll down to the bottom to WordPress and click

 

• Enter the name of the folder where you want to install WordPress,

• Write down the full “AppPath” you entered. That will be the address of your WordPress site,
• Click the “Install Application” button,
• The confirmation page appears, but don’t click the link of your application yet,

• For advanced users only:
  • Before you continue make a note of the WordPress version your provider offers. It is 3.5.  At the time of  the writing of this post the latest version of WordPress is 3.5.1, so later we will overwrite the Winhost version using an FTP client.,
• First we have to set up the MySql database that WordPress will use to store the content of your site, so click the “Site Manager” link below the top menu,
• The link will take you to the Site Tools page,

•  Click the “MySQL” icon to set up the MYSQL database,

• Click the “Add” button to create the MySQL database,

• Enter
  • a name for the database 
  • username
  • the size of the data that the user can use in the database (if WordPress is the only applications you want to connect to this database enter the maximum value into the Quota field)
• Click the “Create” button,

• To see the connection details for the newly created database click the “Manage” link,

• Copy the connection details to a text file, because you will need to enter these values into the WordPress configuration form,
• Click the “Edit” link to set the database password,

 

• Open a new tab in your web browser and enter the address of your wordpress site. In our example it is YOURSITE.com/blog

• WordPress will create the missing configuration file when you click the “Create a Configuration File” button,

• Click the “Let’s go!” button,

• Enter the values that you saved earlier,
  • Database Name
  • User Name
  • Password
  • Enter the Database Server name to the “Database Host” field
• Click the “Submit” button

• Click the “Run the Install” button to create the WordPress configuration file,

• Fill out the form and click the “Install WordPress” button,

• Done! Click the “Log in” button to open your site manager page.