Adding a Class Using Custom Fields in WordPress
Oct 19, 2010 | 7 Comments »
You may have seen the Custom Field box in WordPress when you edit a page or a post but you may not know how powerful this feature can be.
Let’s say that you have multiple pages on your website and you would like to be able to style each of them differently. Instead of making separate page templates in the theme folder, you can add a line of code to the existing template and add different classes right in the WordPress editor.
This post will assume that you would like to add a class for styling purposes, but there are many other ways Custom Fields can be used.
Step 1: Adding PHP to the theme template
Very simply, if you would like to add a class variable, just paste the following line of code just like you would any other class:
class ="post->ID; echo get_post_meta($postid, 'class', true);?>"
Step 2: Adding a class in the WordPress editor using Custom Fields
Like the image below illustrates, just type in class for the Custom Field name, and the name of the class in the Custom Field value, then click “Add Custom Field”. The page or post that you created will now add a class name to the template.
No related posts.
Nope, this one’s beyond me. What’s a class variable?
[Reply]
Keith's reply on October 19th, 2010:
Hmmm, if you don’t understand it maybe I worded it wrong, but I can’t think of a better way to describe it. Essentially, class variable would be a class which can be set within the WordPress editor. I’ll have to think of a better term to explain it.
[Reply]
Mitch's reply on October 19th, 2010:
Here’s the problem; I don’t know what “class” means. That’s why the rest of it doesn’t make sense. What does class refer to?
[Reply]
Keith's reply on October 19th, 2010:
I mean a CSS class. Similar to an id. For example
Ah; see, I didn’t know that until you just told me. I hope your other folks reading this are more savvy. lol
[Reply]
Lol @ Mitch
Thanks Keith, i needed this info!
[Reply]
Keith's reply on May 11th, 2011:
Thanks Glen! Glad I could help.
[Reply]