Let us show you more about custom fields and how to use them on your site.<\/p>\n\n\n\n
What are Custom Fields and how do they work<\/h2>\n\n\n\n
What are exactly custom fields? These little fields allow any user to enter extra information about the post<\/strong>. This is known as meta-data, i.e. \u201cdata about data\u201d and allows you to attach additional information to your posts. Values you can enter in custom fields can range from something simple as adding a text or a number to your post, adding images, changing styles through the field, or actually doing anything that goes through your mind.<\/p>\n\n\n <\/p>\n\n\n\n Maybe everything will be clearer with an example.<\/p>\n\n\n\n Imagine that you\u2019re running a website dedicated to video games<\/strong>. You write news and publish trailers, play around with gaming hardware so you can talk about it and of course you write reviews after new games arrive. After you have written a review and placed screenshots and gameplay videos in the article, you probably want to display important information about the game.<\/p>\n\n\n\n Instead of hiding the most important information about a game in the lengthy text, you might want to display a game\u2019s score, developer and publisher names linking to their website, release date, etc. Yes, custom fields are something that can help you do the magic.<\/p>\n\n\n\n If you let your authors enter that information in a custom field, you can easily extract the information and display it in addition to the review<\/strong>. You\u2019ve seen infoboxes on review sites. If you do so, all reviews can have a standardized template \u2013 this can improve user experience, both on the front and the backside.<\/p>\n\n\n\n Following the gaming website example, you would end up having several custom fields which your authors can enter and which you show to your readers:<\/p>\n\n\n <\/p>\n\n\n\n This is the information your authors would enter into custom fields, and you can display the same in a post. But how?<\/p>\n\n\n\n If you only have one field or you want to show all of your fields on the same spot, you can hook you meta-data all at once with a simple function:<\/p>\n\n\n\n That\u2019s it. That simple function will now stay hooked and it will show all custom fields from a post. But what if you want to show different field in a different position<\/strong> or if you only want to show one specific key? Then you will use a slightly different approach and define the key which will be displayed:<\/p>\n\n\n\n This function will check each and every post in the loop and search for a custom field named \u201cPublisher\u201d. If the key was found, its value will be displayed<\/strong>. You can further customize the way a custom field is being displayed by adding a class to it and style the class with CSS or you can directly enter HTML into the field value.<\/p>\n\n\n\n If you want to, you can use custom fields as conditional. Let stay with the example and let\u2019s say there are times that you won\u2019t be able to know a release date for the game you\u2019re writing about. Instead of typing a custom field, you can automatize the process and tell WordPress to write \u201cTBA\u201d (to be announced) into Release Date field if there isn\u2019t any data added by the user:<\/p>\n\n\n OK, we\u2019ll wrap it up from here. This is the most basic way of using custom fields. But now that you have covered the basics, you can actually do pretty much anything with them. You can, for example, show your mood or a song you\u2019re listening to. Or, you can show a list of posts which contain specific key and\/or value. The sky is the limit.<\/p>\n\n\n\n Custom fields are a great way of extending your posts\u2019 functionality. Instead of letting users deal with the code, you can let them enter a value in a custom field and do something with that information \u2013 there are endless possibilities.<\/p>\n\n\n\n Sometimes, when you are already using specific custom fields, you may need to list posts with those fields.<\/p>\n\n\n\n For example, if you are writing game reviews and already have different custom fields where you display publisher, genre, score, etc. in a separate information box in your review, you might want to display only games from that specific publisher, games from FPS genre or only those reviews with a score of 10<\/strong>.<\/p>\n\n\n\n This kind of information could really be interesting to your visitor. You can allow them to browse your game reviews in much more details or allow them to see the top 10 rated games on your site<\/strong>. Even if you don\u2019t want to publish a new list, this method can help you with data mining \u2013 instead of creating an article from it, you can list all posts with certain property for research purposes only.<\/p>\n\n\n\n In our opinion, the best way of listing posts sorted by a custom field is by creating a new page template and showing a list on a new page<\/strong>. This method allows you to organize your pages and to easily use a new page for displaying what you need. In the following lines, we are about to show you how to find all posts with a specific custom field and\/or its value and show it on a new page.<\/p>\n\n\n\n Let\u2019s stay with the game review example where we want to display all games from Bethesda Softworks (did anyone say Fallout?). For starters, you will need to create and prepare a custom template:<\/p>\n\n\n\n The code is ready to go through all custom fields and to find only \u2018Publisher\u2019 keys with the value of \u2018Bethesda\u2019. You can change the key and value to anything you want. If you would like to display all posts with \u2018Publisher\u2019 custom field containing any value, simply remove \u2018meta_value\u2019 row entirely.<\/p>\n\n\n\n Don\u2019t forget to change the title of the template to something you will recognize later.<\/p>\n\n\n\n Now your template is ready so you can continue creating the list:<\/p>\n\n\n\n That\u2019s it! Now if you open your new page, you can see the list of all your posts which contain custom fields with the values you have chosen.<\/p>\n\n\n\n Now you have to add some text to your new page, style the list and find the best way to show it to your visitors. We hope that this method will help you sort your posts on a whole other level and that you will enjoy it.<\/p>\n\n\n\n A sidebar was introduced in WordPress version 2.2. Since then, it has become a popular way of showing extra content<\/strong> and more often than not, WordPress themes<\/a> will have one by default where you can place any widgets you want.<\/p>\n\n\n\n Although very useful, you don’t want your sidebar to be present everywhere<\/strong>. Usually, these bars are shown anywhere but the home page. And there is no such option to easily turn the sidebar on and off.<\/p>\n\n\n\n So, why not make it yourself. In this part of the article, we will show you how to put your sidebar into a custom field and call it only for posts you want.<\/p>\n\n\n\n Now you have to open a post or a page where you can find “custom fields” under the Text\/Visual Editor. To add a sidebar to that post\/page, do the following.<\/p>\n\n\n\n That’s it. If you have left your custom fields empty, your post will be without sidebar while in the other case, your sidebar should load if you have done everything correctly.<\/p>\n\n\n\n Usually, a WordPress website<\/a> will have only one header, footer and sidebar already defined by the theme you are using. Each one has its functions and design stored in separate files which are called by the theme and then displayed on the site where needed. Because each part of the theme is stored in a different file, you can easily modify them without worrying you will mess up the entire site, and you can change the way only a header, footer or sidebar behaves on your site.<\/p>\n\n\n\n But sometimes, one element won\u2019t be enough and for example, you will want to change your header<\/a>. If you want to change it for the entire site, you\u2019re already ready to go \u2013 open header.php and modify it the way you want it. But what if you wanted to add an ad in a header only for your single posts?<\/strong> Or maybe modify the header only for one post in your entire collection without changing the rest?<\/p>\n\n\n\n Once again, custom fields will help you.<\/p>\n\n\n\n Before we use a custom field to change headers, footers or sidebars, you should have a file prepared. Let\u2019s say you want to change a header for a post or two and you have created a new file called header-header2.php where you have changed the design or inserted a specific advertisement to the post. Before you can continue with creating a custom field, make sure that the file is coded properly and is working on your site. Once the file is up and ready, you may proceed.<\/p>\n\n\n Be careful about naming the file<\/strong> \u2013 if you are trying to change the header, your new header file should look like this: header-newname.php<\/strong><\/p>\n\n<\/div>\n\n\n With this code, you told WordPress to check for a \u201cheader\u201d custom field in every single post. If a custom field with that name was found, WordPress will take its value and use the filename as a header for that post only.<\/p>\n\n\n\n If you have header-header2.php uploaded in your theme, you can now call it in a custom field:<\/p>\n\n\n\n If there aren\u2019t any errors in your As you may have noticed, you are only required to type in the filename of your new header file after the “header-” part. Because of that, it is important to name your new header file correctly<\/strong> and add \u201cheader-\u201c part before the actual name you\u2019re using in the custom field.<\/p>\n\n\n\n The same goes for sidebar or footer file, of course, by changing get_sidebar()<\/em> and get_footer()<\/em> part of the code.<\/p>\n\n\n\n Custom Fields are the inevitable part of practically every WordPress theme out there. These fields allow everyone to include extra information about the post, but unfortunately, this standard WP feature is quite raw. Beginners need some time to get accustomed to using custom fields and developers have to spend a lot of extra time when coding around them.<\/p>\n\n\n\n That’s the reason why Advanced Custom Fields<\/a> (ACF) plugin is so popular among WordPress users all over the world. This free plugin counts more than 1 million active installs at this moment, and we don’t see why the number will start dropping. ACF allows you to create powerful, professional, and intuitive custom fields through a visual editor<\/strong>.<\/p>\n\n\n\n Although quite popular, ACF still requires coding knowledge and a lot of your time if you plan on implementing those fields in a theme. Yes, creating a field group is easy, but displaying those fields isn’t such a piece of cake. And that’s where ACF Theme Code steps in to save developers.<\/p>\n\n\n\n PRICE: <\/strong>Free<\/a><\/p>\n\n\n <\/p>\n\n\n\n This awesome plugin is a product of two developers who decided it’s time to stop wasting time on repeatedly writing the same code over and over again. When developing a theme or modifying an existing one, Advanced Custom Fields requires a developer to implement the right code in the right place within a theme. Since there was no easier way, a developer had to memorize snippet and all of the features of an API in order to do the work.<\/p>\n\n\n\n Aaron Rutley, one of the creators, explained on his blog:<\/p>\n\n\n “When implementing a field within a WordPress theme, it\u2019s likely I\u2019ll forget the field name, was it \u2018profile_image\u2019 or \u2018profile_photo\u2019? I\u2019m also likely to forget how I\u2019ve set that field to be returned, was it ID, URL or Array? I found myself constantly editing the field group to find out.”<\/p>\n\n<\/div>\n\n\n And this is where ACF Theme Code can help out a developer. After you install this free plugin which is now downloaded more than 4,000 times, you can save time when dealing with the code<\/strong>. Whenever you publish, edit or update a field group in Advanced Custom Fields, this amazing plugin will automatically generate code need for implementing the fields into any theme.<\/p>\n\n\n\n You will find this code rendered at the bottom of the page. Next to each snippet, you’ll find a clipboard icon which will make it easy to copy the code. Now you don’t have to memorize anything<\/strong> and you can relax when working with custom fields.<\/p>\n\n\n\n Although the plugin is already a must-have for any developer out there, Aaron says they’re already planning to expand ACF Theme Code:<\/p>\n\n\n “We plan to add support for more popular third-party fields in the future. We also plan to give developers more control over the code that’s generated.”<\/p>\n\n<\/div>\n\n\n While the plugin is free when paired with the free version of ACF, you will need a PRO version<\/a> if you use an extended version of Advanced Custom Fields. ACF Theme Code Pro generates code for all the other ACF Pro field types like the Clone, Gallery, Repeater and Flexible Content field.<\/p>\n\n\n\n![\"Custom](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2016\/05\/custom-fields.jpeg\")
<\/figure><\/div>\n\n\n![\"Call](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2016\/05\/call-of-duty-info.jpg\")
<\/figure><\/div>\n\n\nDisplay all custom fields:<\/h3>\n\n\n\n
\n
<?php the_meta(); ?><\/pre>\n\n<\/div>\n\n\n
<\/pre>\n\n\n\n
\n
Display specific custom field:<\/h3>\n\n\n\n
\n
<?php echo get_post_meta($post->ID, 'key', true); ?><\/pre>\n\n<\/div>\n\n\n
<\/pre>\n\n\n\n
\n
Conditional Custom Fields:<\/h3>\n\n\n\n
<?php $release_date = get_post_meta($post->ID, \n'Release Date', true);\nif ($release_date) {\n?>\n<?php echo $release_date; ?>\n<?php } else { ?>\n<p>To Be Announced.<\/p>\n<?php } ?><\/pre>\n\n<\/div>\n\n\n<\/pre>\n\n\n\n
How to list posts with a specific custom field<\/h2>\n\n\n\n
1. Create a custom template:<\/h3>\n\n\n\n
\n
<?php
\/*
Template Name: Bethesda games
*\/
?>
<?php get_header(); ?>
<?div class=\"container\">
<?div class=\"indent\">
<?php
query_posts(array(
'meta_key' => 'publisher\u2019,
'meta_value' => 'Bethesda'
));
\t\t\t\t
if ( have_posts() ) while ( have_posts() ) : the_post();
echo '<?li>';
the_title();
echo '<?\/li>';
endwhile;
\t\t\t\t
wp_reset_query(); ?>\t\t
<?\/div>
<?\/div>
<?php get_footer(); ?><\/pre>\n\n<\/div>\n\n\n<\/pre>\n\n\n\n
\n
2. Add the page:<\/h3>\n\n\n\n
\n
Show sidebar by using custom fields<\/h2>\n\n\n\n
1. Prepare the template:<\/h3>\n\n\n\n
\n
<?php $sidebar = get_post_meta($post->ID, \n\"sidebar\", true);\nget_sidebar($sidebar);\n?><\/pre>\n\n<\/div>\n\n\n
<\/pre>\n\n\n\n
\n
2. Using the sidebar in custom fields:<\/h3>\n\n\n\n
\n
Change header, footer or sidebar for individual posts with custom fields<\/h2>\n\n\n\n
1. Prepare the file:<\/h3>\n\n\n\n
2. Replace the code:<\/h3>\n\n\n\n
\n
global $wp_query;
$postid = $wp_query->post->ID;
$header = get_post_meta($postid, \"header\", true);
if (!empty($header)) {
get_header($header);
} else {
get_header();
}
wp_reset_query();<\/pre>\n\n<\/div>\n\n\n<\/pre>\n\n\n\n
\n
3. Change a header via custom field:<\/h3>\n\n\n\n
\n
header-header2.php<\/code> file, the new header should appear on top of the post for which you\u2019ve made the change<\/strong>. Still, all the other posts will load your standard header file defined by the theme.<\/p>\n\n\n\nImplement Advanced Custom Fields more easily with ACF Theme Code<\/h2>\n\n\n\n
ACF Theme Code<\/h3>\n\n\n\n
![\"ACF](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2016\/09\/acf-theme-code-wordpress.png\")
<\/figure><\/div>\n\n\nDisplay your mood or a song with custom fields<\/h2>\n\n\n\n
![\"Custom](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2016\/06\/custom-fields-mood.jpg\")
<\/figure><\/div>\n\n\n