How can a Small Business Obtain an Online Presence?
16 July 2014How low-cost computing can save your small business money
17 July 2014WordPress affords website owners with the necessary fields that enable them to easily publish pages and posts. Some of these fields include Category Options, Content Editor, Featured Images and Tags.
Unfortunately, these fields are not adequate to lodge particular cases. For instance, let’s assume you come up with a Book Listing site that will display the Author of the Book, the Publisher and the ISBN number. It is obvious that you will require some extra fields from the ones you already have so you can input other additional and relevant information.
The good news is that, WordPress is currently extensive than ever before. This provides developers with platform to create custom fields that carter perfectly suites any website requirements. These customizable fields could feature a general text input, dropdown menu, text area, calendar, color picker and mage up-loader. The purpose of this tutorial is to show you how to easily create WordPress custom fields. So let us get on.
Highly Developed Custom Fields
For a realistic example, let us consider creating a book-listing site. In order to easily create our custom fields, we will utilize plug-in known as Advanced Custom Fields invented by Elliot Condon. With this plug-in, we will not need to touch the code too much when creating the particular custom fields. Nevertheless, a specific code-level editing for the themed files is necessary in order to display the data that we have inputted into the specified fields.
Upon installing it, an additional new side-menu identified as Costumed fields. Simply go this very menu and click on the Add New button, and name the Group Fields. For instance, “Custom Settings”. See the screen shot below.
You can also click on the ‘add fields’ button to create additional new custom fields, by naming the labeled filed as Author. Underneath it, you can also set the Field Name easily as Book_Author, which can later be used to call out or highlight the data regarding the Author or the book. In addition to this, other additional and optional fields can be set such as Field Instruction and the Placeholder Text.
Thereafter, we can also come up with a set of other relevant fields such as page length, the Book language, the publisher and so much more.
The next thing we will need to do is to assign the specific group fields to highlight in the particular Post Types. This can easily be assigned with Page, Post, Page Templates and Attachments or setting rules that will incorporate other post types in general. In the subsequent example, I would like to highlight the fields to Book Post Type, so that you can easily come up with your own using this handy tool, GenerateWp.
After that, we then proceed to our very Book Post Type editing platform and then fill it up.
Presenting the data
Before we can proceed to the next step, because we dispensed the specific fields to custom post type, we will have to create a new file to highlight the content known as single-book.php. Our codes will also be put in this file.
Once we have populated all our custom fields, we will highlight them in the front-end through the_field( ) feature by the relevant name. For instance, the cord below shows the data from Author Book filed that we have successfully created above.
the_field('book_author')
It is indeed that easy. Moreover, if you desire to ensure that it should be displayed only when the data is presented, you could as well wrap it up with a Conditional Statement. For instance:
if( !emptyempty(the_field('book_author')) ) : the_field('book_author');endif;
Given below are all the codes that we have managed to put together in single-book.php to showcase our book.
<div class="entry-content"><?php if ( has_post_thumbnail() ) {echo '<figure class="book-thumbnail">';the_post_thumbnail('book-thumbnail'); }echo '</figure>'; ?><div class="book-info"><h3 class="book-title"><?php the_title() ?></h3><p class="book-description"><?php the_content() ?></p><h4 class="book-details-title">Book Details</h4><div class="book-details"><ul><li class="book-author"><span class="label">Author:</span> <?php the_field('book_author') ;?></li><li class="book-pub"><span class="label">Publisher:</span> <?php the_field('book_publisher') ;?></li><li class="book-pages"><span class="label">Length:</span> <?php the_field('book_pages') ;?></li><li class="book-lang"><span class="label">Language:</span> <?php the_field('book_language') ;?></li><li class="book-pubid"><span class="label">ISBN/ASIN:</span> <?php the_field('book_isbn_asin') ;?></li></ul></div></div></div>
With just a little fashioning using CSS, we can easily come to the following subtle and neat achievement.
Closing thoughts
Within the tutorial, we have articulately guided you through the fundamental example of utilizing Advanced Custom Fields Plug-in to establish your individual set of new Texts Fields and easily dispense them to a Custom Post Type.
Besides that, the plug-in provides a variety of custom fields to boost our website including Text Area, WYSIWYG Editor, User List Options, Drop Downs and Google Maps among others. You can as well further explore the plug-in and consider the cool inventive you can accomplish.
