Custom Fields in WordPress: Tutorials and Resources
An increasing number of businesses and website owners are using blogs as a means of communication with their customers and website visitors. If your business already has a website it is possible to have a blog that matches the look and feel of your existing website without doing a complete re-design and without paying thousands of dollars to have the blog developed. Using WordPress you can tailor an already existing blog theme to seamlessly flow with the rest of your website.
Why is it important to have a blog that matches the rest of your website?
1 – Maintaining the same design throughout your website will help to give your visitors a consistent experience and message while on your site.
2 – A more professional look can be accomplished by creating a customized theme that matches the rest of the site.
3 – By maintaining a consistent design throughout the site you will allow visitors to focus on the content of your blog rather than focusing on the design and layout changes.
4 – Many WordPress themes are used by hundreds or thousands of websites, whereas your custom them will be unique to your business.
5 – Using a blog layout that does not flow with the rest of your site may confuse visitors into thinking that they have left your site.
Understanding WordPress Themes
Editing and customizing WordPress themes can be very intimidating if you are not familiar with how they work. Essentially, when you are viewing a post on a WordPress blog you are seeing a combination of several different files within the theme. WordPress uses what they call The Loop, a php function that determines what the visitor is looking for and what should be displayed on the screen.
Although the WordPress system is very dependent on php, editing a theme does not require php knowledge. The php portion of coding is contained in easily recognizable portions of code. The html around the php can be changed to customize your theme to your website without changing the php coding. I will not be getting into the details of The Loop in this post, so please see the WordPress Codex if you need information and documentation on The Loop.
As mentioned above, WordPress uses separate files for different sections of the blog page. The header (portion of the page located above the blog post) comes from the header.php file. The blog post (or posts, if you are looking at a homepage or a category page) comes from the MySQL database. Most themes contain a sidebar.php file that appears next to the blog post, either to the left or the right. And the footer.php file contains the information that appears below the post and the sidebar.
Together the header, sidebar and footer files form a template that is applied to every page (although some themes are set to not show the sidebar in certain situations). Because of the template-like structure, any changes that you make to header.php, sidebar.php and footer.php will be reflected on all of your pages. This makes the customization easier as you really only have to customize the template.
WordPress comes with two themes, Default (also known as Kubrick) and Classic. The Kubrick theme is a good starting block if you are creating or customizing your own theme. It is a fairly simple theme with clean and valid coding that has been used by thousands of bloggers. Almost any problem that could possibly occur with Kubrick has already been found and corrected.
However, if your existing website has a more unique design you may want to look for a theme that more closely resembles your layout, which can make the customization easier. You can find a gallery of free themes at http://themes.wordpress.net.
Breaking Down Your Existing Design
Since we know that WordPress sees the layout as a combination of a header, a body (blog posts), a sidebar and a footer, visualizing your existing website in the same sections will make the customization possible.
To start, take a page on your site that you want your blog to match and remove the content of the page. Leave the structure of the design and any images and navigation menus that you want to use on your blog. The blank space where you removed the content is where your blog posts will go. Anything above that will need to be included in the header.php file. For example, the header.php file of our blog theme includes the navigation menus and everything above. The picture below shows the portion of the design that is contained in header.php.
If you’re working with Kubrick, the header.php file also contains the CSS code for the page’s background image. Most likely you will want to replace Kubrick’s background image with your own.
Chances are your existing website already has some type of sidebar. The sidebar may contain your primary navigation, text links to various pages, an email sign up form, or just about anything. Some of these things in your existing sidebar you will want to include in your blog sidebar. The blog sidebar by default includes a search box, links to pages that categorize your blog posts, a blogroll (links to other blogs), and some metadata that includes your login link.
To add content to your sidebar, open sidebar.php. If you are working with the default Kubrick theme your sidebar consists primarily of html code for an unordered list and php code. The php coding is used to generate links to your categories and archive pages. Any html that you want to add can be added in the sidebar, but it should not be placed inside php code.
You can also remove any of the items in the sidebar that you do not want. If you don’t want to have a search box, remove the small piece of php coding that includes searchform.php. For our theme we chose to remove the blogroll.
The footer is edited in much the same way. The footer.php file for the Kubrick theme contains very little coding. The php coding that is in footer.php is only there to gather the name of your blog and to provide a link to your RSS feed. This coding can be removed if you like and any html that you wish to use for your footer can be entered here.
Editing the Style Sheet
Every WordPress theme includes a CSS file, style.css. This file controls the look of the entire theme. Most of the changes you will be making to customize your theme will be done to style.css.
The style sheet for Kubrick is very user-friendly when you’re trying to customize the theme. It is broken down into the following categories:
– Typography and colors
– Form elements
– Various tags and classes
With this type of organization it is easy to find what you are looking for in order to make changes.
Editing the styles to create your custom theme will take some experimentation, so it is best to create a test area where you can make mistakes and not affect anything. If you already have an existing blog do not attempt to make changes to a theme while it is currently selected as your blog theme. My recommendation is to install a WordPress blog in a folder on your site that is strictly for testing purposes. This way you can make changes to the style sheet and php files, update them to see how you theme looks, and not have to worry about causing any problems with your existing blog.
The CSS file for a WordPress theme works the same way as any other CSS file. Where you could run in to problems is in the naming of the divs and classes. Most likely when you are customizing a theme you will be leaving some of the structure in place, and you will be adding some of your own. For example, the header.php file for Kubrick contains a header div and a header image div. When you are customizing the header to add what you want you can either use the existing structure, or you can create your own. If you use the existing structure, anything in the header div will still be styled under the existing CSS file until you change the CSS to meet your needs.
In our example site everything we added to the header file, picture, navigation and search box, are all contained within the header div. To customize the header.php file we then changed the height and width of the header div to meet our needs, as well as changing the background image and color. If you’re used to working with CSS this process is not too difficult.
The key to customizing the theme is breaking it down into pieces – header, sidebar, post area, and footer. Work on one piece at a time with the appropriate file and the CSS file. Once each piece is completed you will have you own customized WordPress theme.
One of the keys to WordPress’s flexibility and endless possibilities is the use of custom fields. With custom fields you can do all kinds of things, but most designers and developers who are new to WordPress are not familiar with how to put custom fields into practice. In this post we’ll look at a number of tutorials that will show you some potential uses of custom fields, as well as a handful of plugins that make it easier or more productive to use custom fields.
This article from Justin Tadlock gives an overview of custom fields, and it’s actually the introductory post to a series on the subject of custom fields (other posts in the series are included in the list). If you’re not familiar with custom fields or if you just want to make sure you get the basics before moving further, this article is a great starting point.
The WordPress Codex of course provides some documentation on the subject of custom fields. Although many of the articles that are featured here will get into more specifics, it’s always a good idea to remeber that the codex is available when you have questions, or keep useful articles on the Codex like this one bookmarked.
Jin Yang explains custom fields and shows how you can use them to customize a blog post by styling the background. In the example he chooses a custom background image for the post, which is a pretty cool trick for making your blog unique.
Perishable Press has a two=part series on custom fields. The first part includes some basic information and shows a few ways that custom fields can be used, including adding images to the sidebar.
The second part of the Perishable Press series goes into more detail on working with custom fields. The article covers topics like conditional display of custom field data, and showing data only if a custom field exists.
One of the more common uses for custom fields is to add images to a post. This article is part of Justin Tadlock’s series and he provides all the instruction and code that you will need to get a custom field to show an image on your posts.
Tutorial9 also provides a similar tutorial for giving the basics of custom fields and using them to show thumbnails on the front page or on the post page.
Derek Punsalan shows a really nice approach to use a custom field for adding a background image behind the post title. This is another way to take advantage of the power of custom fields to create a blog that looks a little more unique.
This is a brif post from WPRecipes that explains how you can the value of a custom field, with the necessary code provided.
In this article Nathan Rice shows a way to get the contents of a custom field by using less code. His approach involves editing the functions.php file, which he explains.
This article shows how you can use custom fields in situations where a post may have zero, one or multiple values of the same custom code. The example used in the tutorial is quotes. Some post may have none, while others may have several.
This post shows how you can use custom fields to add AdSense or other ads to specific posts. While there are plugins for this purpose, knowing how to do it manually is never a bad thing.
This is another post in Justin Tadlock’s series. In this article he shows how you can add YouTube videos to your sidebar, controlled by custom fields. This is an interesting idea that you don’t see in action very often, but could have a lot of potential in the right situation.
If you often write posts in a series, Justin Tadlock shows how you can list other posts from the series by using custom fields. The end result would be similar to a related posts plugin, except you would have more control over which posts are listed.
Darren Hoyt has a two-part series about template tags and magazine-style themes. In the second part he covers a number of items, including custom fields as they relate to the magazine-style layout.
Chris Cagle’s article covers three things you can do with custom fields: 1) a custom “read more”, 2) awesome thumbnailed recent posts, and 3) post-specific CSS overrides.
Raj Dash’s article on Performancing can be helpful for seeing the potential of custom fields. You may see a few ideas on here that you hadn’t thought of before that would be useful on your site or for a client project.
While custom fields have plenty of power and potential, they’re not always the most user-friendly for clients. Function has provided this tutorial for creating custom write panels that will allow you to accomplish the same things as custom fields, but may be a little more manageable for some people, especially non-tech-savvy clients.
Plugins for Working with Custom Fields:
In addition to the tutorials featured above, there are a number of plugins that enhance the use of custom fields in some way, or make them easier to use. Here is a small sampling of useful plugins that are compatible with the latest version of WordPress, 2.7.1.
This plugin adds the default custom fields on the Write Post/Page, making it a little bit easier to work with.
You can use this plugin to show custom fields in your posts by using shortcode, with no modification required for your theme.
With this plugin you can easily add images to your posts, pages and feeds. There is also functionality to display recent posts as images instead of text links.
Custom Field Taxonomies will allow you to enhance the capabilities of your site by making some of your custom fields act like tags.
This plugin will allow you to easily show custom field data in the sidebar of specific posts, providing essentially limitless possibilities.
This plugin lists all values of a choosable custom field name, groups the values of of a post and (hyper-) links the values to their posts as a sidebar widget.
This plugin helps to improve the functionality of the WordPress search by allowing multiple form inputs to search different aspects of a post. An example use (and the reason the plugin was created) is for searching a real estate website by factors such as price.
More Fields is a WordPress plugin that adds boxes to the Write/Edit page. These boxes contains input fields, so that additional (more) fields can be added to a post.
For more WordPress-related content, please see: