How to Display Custom Fields Outside The Loop in WordPress

Do you want to display custom fields outside the loop in WordPress? Normally, custom fields are displayed inside the WordPress loop along with other post content and metadata. In this article, we will show you how to display custom fields outside the loop in WordPress.

How to display custom fields outside the WordPress loop

What Are Custom Fields in WordPress

Custom fields allow you to add additional meta data into your WordPress posts and then display them along with your post content.

You can add custom fields by simply enabling the custom fields metabox under the Screen Options. You can also create custom metaboxes in WordPress to give your custom fields a better user interface.

Adding custom field to a WordPress post or page

For more details, see our beginner’s guide on using WordPress custom fields.

Since custom fields add metadata to posts, they can be easily displayed inside the WordPress loop along with other post content. However, sometimes you may want to display them outside the loop. For example, in a sidebar widget. This is when it becomes a bit tricky.

That being said, let’s see how to easily display custom fields outside the loop in WordPress.

Display Custom Fields Data Outside The Loop in WordPress

Instead of displaying custom fields meta data outside the loop, we’ll actually show you how to use multiple loops in your WordPress themes without affecting the main loop.

This article requires you to add code to your WordPress theme files. If you haven’t done this before, then you may want to see our guide on how to copy and paste code in WordPress.

You’ll need to add the following code to your theme files where you want to display the custom fields data in WordPress.

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);
wp_reset_query();
?>

This code simply loads up the global variable $wp_query to get the post ID. After that, it uses get_post_meta() function to fetch and output your custom field data.

Don’t forget to change Your-Custom-Field with your actual custom field.

You can customize the code to match your needs. You can also use other query arguments to fetch and display custom fields data for different posts and pages.

Let’s take a look at another example. This one uses WP_Query class which is a much better and more flexible way to use multiple loops in your WordPress theme files.

Simply add this code to your theme or child theme where you would like to show the custom field.

$args = array ( // Post or Page ID 'p' => 231,
); // The Query
$the_query = new WP_Query( $args ); // The Loop
if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); echo get_post_meta( get_the_ID(), 'Mood', true); } /* Restore original Post Data */ wp_reset_postdata(); } else { echo 'Nothing found'; }

Don’t forget to replace Mood with your own custom field name and post ID with your own post or page id.

Custom field in WordPress sidebar widget

That’s all for now.

We hope this article helped you learn how to display custom fields outside the loop in WordPress. You may also want to see our WordPress theme cheat sheet for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Style Individual Categories Differently in WordPress

Do you want to style categories differently in WordPress? Most WordPress themes use the same style for all category archive pages. However, if you run a content rich website, then you can style each category differently to maximize their potential. In this article, we will show you how to easily style categories differently in WordPress.

How to style categories differently in WordPress

Why Style Categories Differently in WordPress?

As we said earlier, most WordPress themes use the same template for each category archive page. That’s because theme developers don’t know how you will be using the categories on your website and what those categories will be.

However, if you are running a content rich site, then changing the layout of a category archive page can have a dramatic impact on how users engage with the content on that page.

For example, if you run a news or magazine site, then you can have local ads displayed on the local news category. You can show weather information, show most popular stories in that category, and so on.

Having said that, let’s see how to easily style individual categories differently in WordPress.

Styling Individual Categories Differently in WordPress

There are multiple ways to style categories in WordPress. We will show you two different methods to style categories, and you can choose the one that best suits your needs and skill level.

Using Single Category Template in WordPress Theme

WordPress themes follow a standard template hierarchy. Depending on a template file name, WordPress can automatically pick the right template to display a page.

For example, it looks for category.php file to display category archive pages.

WordPress also allows you to create templates for individual categories as well. Let’s suppose you want to style the ‘Apple’ category differently. You can do that by adding a new template file to your theme and naming it category-apple.php.

Connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder and create a new file category-apple.php. Don’t forget to replace apple with your own category name.

Creating a template for individual category in your WordPress theme

You can use your theme’s category.php file as a starting point. Simply edit and copy all of its content. Now edit your newly created category-apple.php file and paste the code inside it.

After that you can start making changes to your individual category template. You can create and use a different sidebar for this category, make it a full-width page, add a welcome message, or anything else you want.

Style Individual Categories in WordPress Using CSS

WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.

For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.

Category class added to body element by WordPress

You can use this CSS class to style each individual category differently by adding custom CSS.

Here is some example CSS that you can use as a starting point.

body.category-apple { background-color:#EEE;
background:url("http://example.com/wp-content/uploads/2017/background.jpg") no-repeat fixed;
color:#FFFFFF;
}
.category-apple .site { background:#232323; }
.category-apple a { color:#CCCCCC; } 

Don’t forget to change the category name in the CSS class with your own category name.

Changing category style using CSS

We hope this article helped you learn how to style categories differently in WordPress. You may also want to see our list of most wanted category hacks and plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.