How to Differently Style Posts in Particular Categories
Tags: wordpress, post, categories
Published: 2021-05-06 02:33:07

<!-- wp:paragraph -->

<p>Have you ever visited a WordPress website and found that articles in different categories had different styles and designs like different backgrounds, fonts, text colors, ...? For example, in a <a href="https://gretathemes.com/wordpress-free-music-blog-theme/" rel="follow">music blog</a>, the articles in the "Blue" category have a dreamy purple background, and the articles in the "Rock" category have a dark color. This is an interesting highlight in the design, making your website more impressive in the eyes of viewers.</p>

<!-- wp:more -->

<p><!--more--></p>

<!-- wp:paragraph -->

<p>Today, I'm going to walk you through some simple steps to change the style of posts by category, specifically the background color!</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Method to Change the CSS for Each Category</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>To change the posts' background color by categories, we need to create a <a href="https://metabox.io/series/custom-fields/">custom field</a> for the category to choose the background color, then use some code to display the background color on the front end.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>With the same method as above, you can change other CSS attributes of whatever category you want, for example:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>Add a class to the body tag (via the <code>body_class</code> filter) to customize the CSS for the whole page more conveniently</li>

<li>Change post title color</li>

<li>Change the font size</li>

<li>Change the position or hide the sidebar</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>This method has many other applications as well, depending on your creativity. The main idea here is to create settings for the category, then get/use these settings for the posts in that category.</p>

<p><strong>Note</strong>: If you already have had many different layouts and want to choose one for a post, or category, you can use the same method above. However, you'll need to create a class to identify the post / category using which layout.</p>

<p>Now, back to the work of changing background color for posts by category, here is how to do it in detail:</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Getting Started</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>To change the background color of posts by category, you need the following plugins:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>Core <a href="https://metabox.io/">Meta Box</a> plugin (free): it's a framework that helps create custom fields simpler and faster. This plugin is available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>.</li>

<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a> (premium): it's a Meta Box extension that helps you create custom fields with an intuitive user interface right in the backend of your WordPress website.</li>

<li><a href="https://metabox.io/plugins/mb-term-meta/">MB Term Meta</a> (premium): it's a Meta Box extension that helps you add custom fields to taxonomy terms such as categories and tags.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>Once you have installed and activated all the mentioned plugins, follow these steps to change the background color of your posts by category:</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 1: Create a New Custom Field for Category</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>First, go to <strong>Meta Box&gt; Custom Fields&gt; Add new</strong> to create a new custom field:</p>

<p><img class="aligncenter" src="https://i.imgur.com/cqa0PaM.png" alt="Create Custom Fields for the Category" width="1900" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>I created a <strong>Background Color</strong> field with <strong>Color Picker </strong>field type and this information:</p>

<p><img class="aligncenter" src="https://i.imgur.com/lEB8WPc.png" alt="created a Background Color field with Color Picker field type" width="1901" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Next, we need to display this custom field on category by moving to the <strong>Settings</strong> tab and choosing <strong>Location</strong> as <strong>Taxonomy &gt; Category</strong>:</p>

<p><img class="aligncenter" src="https://i.imgur.com/KdN7VSr.png" alt="display the custom field on category" width="1920" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Now, edit any category by going to<strong> Posts </strong>&gt; <strong>Categories </strong>&gt; Select category &gt;<strong> Edit</strong>:</p>

<p><img class="aligncenter" src="https://i.imgur.com/oJljnFl.png" alt="edit any category on the WordPress website" width="1903" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Scroll down to the bottom, you will see the <strong>Background Color</strong> custom field that we have just created above:</p>

<p><img class="aligncenter" src="https://i.imgur.com/MMxWeRO.png" alt="The Background Color custom field" width="1901" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:heading -->

<h2>Step 2: Change the Background Color for Posts</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>To change the background color for posts, add this code to the <code>functions.php</code> file:</p>

<!-- /wp:paragraph -->

<!-- wp:preformatted -->

<pre class="wp-block-preformatted">function estar_child_output_frontend() {

If ( ! is_single() ) {

return;

}

$categories       = get_the_category();

$background_color = get_term_meta( $categories[0]-&gt;term_id, 'background_color_taxonomy', true );

if ( ! $background_color ) {

return;

}

echo '&lt;style&gt;

.single-post {

background-color: ' . $background_color . ';

}

&lt;/style&gt;';

}

add_action( 'wp_head', 'estar_child_output_frontend' );</pre>

<!-- /wp:preformatted -->

<!-- wp:paragraph -->

<p>Code explanation:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li><code>estar</code> is the theme that I am using. You can download this free theme <a href="https://gretathemes.com/wordpress-themes/estar/" rel="follow">here</a>.</li>

<li><code>get_the_category ()</code>: This function returns an array including all the categories where the post is.</li>

<li><code>get_term_meta ($ categories [0] -&gt; term_id, 'background_color_taxonomy', true)</code>: use <code>get_term_meta ()</code>to get the value of the custom field corresponding to the returned values of the <code>get_the_category()</code> function, with the id of the custom field is <code>'background_color_taxonomy'</code> (created in step 1).</li>

<li><code>'wp_head'</code>: This hook will print the above data into the head tag on the front end of your WordPress website.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>Now, it is time to check the results. I will try to change the background color of posts in a category called Breakfast:</p>

<p><img class="aligncenter" src="https://i.imgur.com/oJljnFl.png" alt="change the background color of posts in a category called Breakfast" width="1903" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Then, we just need to click <strong>Select Color</strong> in the <strong>Background Color</strong> section, choose a color, and then click <strong>Update</strong>:</p>

<p><img class="aligncenter" src="https://i.imgur.com/iyDqbFC.png" alt="Choose  a color in the custom field" width="1901" height="937" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>This is my post in the Breakfast category before I change the background color:</p>

<p><img class="aligncenter" src="https://i.imgur.com/fY3cr7M.png" alt="The Breakfast category before we change the background color" width="1345" height="657" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>And this is how it looks after I change the color:</p>

<p><img src="https://i.imgur.com/1mTCfRy.png" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>You see, now your customers can "enjoy the dish" with an elegant blue background.</p>

<h2>Video Tutorial</h2>

<p>https://youtu.be/sV_ZW2y5CpY</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Last Words</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>With just a few simple steps, combined with a bit of aesthetics, you can make these posts stand out, more attractive than the posts in other categories on the website! Surely readers will be extremely impressed with your blog or website - such a pretty good tip for <a href="https://deluxeblogtips.com/how-to-create-successful-blog/" rel="follow">making your blog more successful</a>, right? Note that while <a href="https://gretathemes.com/color-wheel-for-website-design/" rel="follow">choosing colors</a> and <a href="https://gretathemes.com/google-fonts-for-bloggers/" rel="follow">fonts</a> for each category, choose carefully so that the website design is beautiful and harmonious.</p>