Hi. I’m Dre Armeda. I'm a Harley enthusiast, and a Chargers fan. I wear many hats, and love tacos. I'm infatuated with WordPress, web design, and web security. I work at Sucuri Security. I hope to help make the web a safer place!
post

HOW TO: Variate WordPress Page Images With PHP

When I created Armeda.com I wanted an easy way to have a different title on each interior page based on an image.

This is a quick and dirty way to add one piece of code to page.php or to custom templates which will output a different image depending on the page title.

Different WordPress Image per Page using PHP

So get your WordPress on. Get a new install with your favorite theme ready. You should have the basics to HTML/CSS/PHP to get through this tutorial.

The idea here is to be able to add a small PHP snippet once and not have to touch it again after the theme is ready to go.

So lets get going. Grab a fresh theme which has an area that you want to fill with an image, or image based text. I opted for image based text on Armeda.com to outline each page title. This is the second theme on Armeda I’ve used this technique and I am finally getting around to sharing.

WordPress Theme Template MastHead Area

Insertion Point

Ah yes, time to figure things out a bit. We need to determine where in your page you want to output the image. Then you need to add the code in your theme files so it outputs in the correct spot. In the case above, the blue area outlined in the red box is where I wanted to output the text image.

In my case, I am using a custom template for my interior pages. You may not be, and that’s ok too. In your theme file you should have a page.php file, this is the file you will open and edit to add the image.

Text Editor To add PHP IF Statement

Once you have the appropriate file open, find the area you want to insert your code. As you can see in the image, I am using a class to wrap around the masthead area where I want to display the image.

So let’s insert the code. We are going to use a simple IF statement to get the ball rolling. Not sure what an IF statement is? You should :) if not go here.


< ?php if (!is_page()) { // if it is not a page
    $armeda_image = 'home';
} else { // if is is a page
    $armeda_image = $post->post_name;
}
?>

In the snippet, ensure to change armeda(my domain) to your domain name excluding the extension(.com .net).

That’s pretty simple, but we’re not finished.

What you’ve done so far is say “Hey, if this is a page, bring up an image with the same name as the page. If it’s not a page, automatically display the default home image.” (If you are not using a home.php make sure you add a home image, or change the = ‘home’; to an existing page.) I have used search in the past.

Now lets define what type of image file, and where the IF statement should pull the image files from.

<img src="<?php echo get_bloginfo('template_directory') . '/images/titles/' . $armeda_image . '.png" alt="Armeda.com"/>'; ?>

Make sure to change $armeda_image to to $yourdomain_image here as well or else it won’t work :)

This piece of code points to the proper directory in your template directory and also calls for .png images. You can define whatever directory you’d like and it works with various image file types.

Image creation and Upload

Ah, the hard part is done. Now it comes down to your HTML/CSS skills and of course, image creation.

Armeda About Page Title Image

On Armeda, I wanted text titles on each interior page of the site. For you of course, well I am not sure what you will do.

Create an image for each page. Make sure your image name is the same as the page you want it on. For example, I named the image above about.png and it is displayed on my about page.

Once you have created all of the image, upload them to the directory you defined in the snipped above ( ‘/images/titles/’ ).

Armeda MastHead with Title Image

You should now have a custom image on each WordPress page using a small PHP snippet. If you visit the various pages on Armeda.com you will see each interior page has a different image using this technique.

Do you have a better way to do this? I would love to hear your feedback or better ways to create a similar outcome.

I would also love to see samples of it in use, drop a link in the comments if you end up implementing.

Happy WordPressing!

Comments

  1. Hi, Where does the 2nd line of code go, does it simply follow the 1st block of code.
    Thanks

  2. Great writeup, just need to remind everyone to close up that div at the end of the content area.

    Then all is great!

Trackbacks

  1. [...] more here:  HOW TO: Variate WordPress Page Images With PHP | Armeda SHARETHIS.addEntry({ title: "HOW TO: Variate WordPress Page Images With PHP | Armeda", url: [...]

  2. [...] This post was Twitted by ad_web [...]

  3. [...] http://dre.im/variate-wordpress-images-with-php/ Want to variate your header images? Want to automatically change images on your posts? This tutorial shows you how to. No Comments » [...]

Speak Your Mind

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.