Custom fields allow us to add content blocks in different areas of a given page. Let’s take as an example a website home page, where we need to show a video and a slideshow. In WordPress back-end the default text area could let us easily post those one after another, but what if I want to show the video in a sidebar and the slideshow in the main content area in our home page? I also don’t want to show the video on contact page where I want to have a map instead.
In following site we need the slideshow above, main content at bottom left and the video at the bottom right in our website layout.
The solution is that we need to split the content in different content blocks and pull them in our website layout using Custom Fields and as I will show later, it’s easy to place them wherever we need in our HTML.
An important point is that Custom Fields let us decide which content block goes where on a specific page.
Custom Field Template plugin enhances the default WordPress custom fields. The difference is that it adds a nice look to these fields and give us more flexibility and power.
Using this method we can be creative and flexible with our content management and we can place those content blocks anywhere on our home page.
But wait! What if I want to show those content blocks, for example the video, on other pages of the website?
Custom fields alone are best for creating content blocks for specific pages. If you need to re-use the same slideshow or video on different pages of the site then we need to use Custom Post Types or Widgets, which are defined globally. That means you upload the video once and it’s being pulled on other pages automatically. We could do that with Custom Fields as well, but nobody wants to upload the same video ten times for ten different pages. And what if we need change that video later on? Change it again on the ten pages individually?
That’s why we need to analyze in the beginning where we’ll need to use the content blocks and that way we can decide which method to apply.
Now let’s see a Custom Field Template main advantage and compare the look of default Custom Fields with those of our plugin.
As you can see all custom content fields from all over the site are grouped in a drop down menu with no explanations. If the site is bigger content management gets clumsy and hard to use. Those fields also don’t have text styling options.
Like I mentioned in the beginning, after Custom Field Template plugin installation, our content fields will become easier to manage.
Wow. What just happened? Our default content fields transformed in something beautiful and easy to use.
If you notice, now we only have content fields specific to our home page, where each one is grouped in its own fieldset and has an explanatory label. We ca now easily throw in images, videos, text which we can style etc.
From this point on I assume you are familiar with WordPress back-end and although coding experience it’s not required, next section is dedicated to developers, both beginners or advanced. So our first step is to install our plugin and head out to the configuration page which is in Settings -> Custom Field Template.
Next we will define the Custom Field for the Video.
[Youtube_fieldset] type = fieldset_open legend = Youtube Video [Youtube] type = textarea rows = 4 cols = 40 tinyMCE = true htmlEditor = true mediaButton = true hideKey = true label = Insert here video using the Youtube Icon [Youtube_fieldset] type = fieldset_close
Within the same template, right after first Custom Field, we can add another one for our slideshow images (We assume we already have created the frontend using a jQuery slideshow plugin)
[Slideshow_fieldset] type = fieldset_open legend = Slideshow area [Slideshow] type = textarea rows = 4 cols = 40 tinyMCE = true htmlEditor = true mediaButton = true label = Upload Slideshow Images Here using Medium Size - 540 Wide X 405 High hideKey = true [Slideshow_Text] type = textarea rows = 4 cols = 40 tinyMCE = true htmlEditor = true mediaButton = true hideKey = true label = Insert Slideshow Comments [Slideshow_fieldset] type = fieldset_close
For usability purposes I recommend wrapping each Custom field in a fieldset. Clients will send you Christmas gifts for that. In our first example, the fieldset name is [Youtube_fieldset] and should be changed for each new Custom Field.
Using hideKey = true we hide our custom field name and with label we replace that with a useful explanation. The other code pieces are self explanatory and more options are named in plugins Option List.
Another mention is that the plugin Custom Field Template won’t replace by default the regular Custom Fields shown above and you should go under plugin configuration and choose in Global Settings area Disable the default custom fields
First we define the custom fields in the loop on our home_page.php:
Then we call each Custom Field in different areas of the same page.
We can use just next snippet:
Where Youtube should be replaced with your custom field name. This way we can place our custom fields anywhere in our WordPress templates!
This would be useful as each post-wrap has a border-bottom. If the custom field is empty you don’t want to show that border by itself. In future, when the client decides to add content in that custom field, everything will show up.
Expanding the idea above we can achieve this too.
In this example we have a testimonial Quotes Slideshow published via post types in a sidebar of each page. Now if the client doesn’t want to show the quotes on certain pages, we can give him the option with radio buttons used as custom fields. In our Custom Field Template Settings page, we create a new template, enable it for all pages and we have:
[Enable_Sidebar_Quotes] type = radio value = yes # no default = yes hideKey = true label = Show Sidebar Quotes slideshow on this page?
In our sidebar.php file we insert following:
<div class="quotes-wrap clearfix"><img class="left" alt="" src="<?php bloginfo('template_directory'); ?>/i/quotes-top.png" /> <div class="quotes flexslider"> <ul class="slides"><?php remove_filter( 'the_content', 'wpautop' );?> <?php $loop = new WP_Query( array( 'post_type' => 'quotes', 'orderby' => 'menu_order', 'order' => 'ASC', 'posts_per_page' => -1 ) ); ?> <?php while ( $loop->have_posts() ) : $loop->the_post(); ?> <li> <?php the_content(); ?> <span class="name"> <?php the_title() ?> </span> </li> <?php endwhile ?> </ul> </div> <img class="left" alt="" src="<?php bloginfo('template_directory'); ?>/i/quotes-btm.png" /></div>
On each page we can now select if we want to show the testimonial slideshow or not.
Under Global Settings select Use wpautop function. This will automatically add paragraphs and it will enable the editor buttons on text fields for our Custom Field Template.
Now we may have an area where we don’t want to output paragraphs. Our testimonial slideshow block is built using lists. In sidebar.php, before our slideshow loop, just add the following code which will output only text without paragraphs or other HTML elements that can mess up our nice slideshow.
Using Custom Fields and taking advantage of Custom Field Template plugin gives us great flexibility and turns WordPress in a full capable Content Management System.
I wanted to mention that there are other plugins similar with Custom Fields Template and few offers the power and stability such as this one. I have developed WordPress websites using Custom Field Template since 2009 and I never had a problem after upgrading. Magic Fields could be a nice alternative, as it manages Custom Post Types and Custom Fields all in one, but I’m afraid that upgrades could break it, so I’m still going with the classic fail proof method.
Do you have better methods or questions? Please comment below!