Custom background images using Wordpress
Wordpress as a CMS
Wordpress is an excellent system to build your website, blog or even portfolio on. Almost all of my projects these days are for using Wordpress as a CMS. Not only can Wordpress do blogging very well, but it can also do content management really well. Today I'm going to introduce you to the custom field.
The Custom Field
The custom field has been around Wordpress since version 2. It allows you to customize posts & pages with content content that can exist in areas other then the primary post area. For example you can use it to display custom HTML in sidebars based on what page it is just by specifying the correct Custom Field name in your Post or Page.
The Example
A really good example of this is on a recent project I needed to have a unique background image with a default fallback image in place just incase we didn't set a new background image. There are many potential solutions to this problem:
- Set an ID of the div relative to the page ID value & create a custom CSS stylesheet with each background image
- Setup a widget/sidebar area & insert a html style on the element
- Setup a widget/sidebar area & under lay an image & use z-index for positioning
Those would have been very complex, non-user friendly & hard to maintain; so I opted for the more user friendly experience: use Custom Fields. Custom fields are great because you can define anything you want or need within that field that is specific to just that page or blog post. But it provides you with a nice interface for managing content.
The Code
It's really, really easy to get going on Custom Fields in Wordpress. In your page file all you need to do is define a name & then call it in your page or post.
Here's an example of my code:
<?php
// Showing the custom image defined on the page on admin
if(get_post_meta($post->ID, "backgroundImage", true) != "") {
$format = 'style="background:url(%s);background-repeat:no-repeat;"';
printf($format,get_post_meta($post->ID, "backgroundImage", true));
}
?>
Let me break it down for you:
- Simple control structure to check for the existence of the get_post_meta data
- The get_post_meta returns the data found with the page/post ID of argument backgroundImage, if nothing's found it returns a false & terminates the statement.
- $format is setting up a PHP format string, with the %s esentially a veriable we're going to use later
- the printf calls the $format & the backgroundImage and formats it into a string
Doing this ensures that:
- I have a fall back for when something isn't defined.
- I override any css by placing this as an inline style vs a css stylesheet style, ex <div //PHPstatement> </div>
- The format string insures that I get the correct placement of the backgroundImage link every time the script is run when the page is built.
Now to use this, all you need to go to is Post (Or Page) > Your page or Create New > Under the body of where you enter the content is a section for custom fields. Just plugin backgroundImages & the url, then you are golden!
Resources
