Docs

[zencracker]

Hello, I thought I’d create a new thread for this question. I’d like to have the category descriptions show on the category pages. I have images and video plus text on each category page and these showed in my previous template. I use the category pages as a landing page. Is this possible with some simple code? Thank you!!

[Lely]

Hi There,

Yes this is possible with a little customization.
First, add category description on Post > Categories > Edit Category > Add Description on Description field.
Then we can display this using the following code:

 	<?php if(is_category()): ?>
    <p class="cat-desc"><?php echo category_description(); ?></p>
	<?php endif; ?>

To do that, please share your site URL first. Then describe where you want it to display. Please note to be specific on the location so we can give you the right code.

[zencracker]

Thank you! I’m so glad that this is possible. Here’s one of our category pages for reference:
http://liquescencemedia.com/category/secrets-and-first-tastes/

I want all the descriptions, with headline and image (and any other elements), to appear before the content post grid.

Would this code be inserted on the category archive page? Thank you again for your help!

[zencracker]

Hello – Just checking in on any answer for this. Thanks!

[Rad]

Hi there,

That’s possible, please add this code to your child theme’s functions.php

add_action('x_before_view_global__index', 'display_category_description');

function display_category_description () { ?>

<?php if(is_category()): ?>
    <p class="cat-desc"><?php echo category_description(); ?></p>
<?php endif; ?>

<?php }

Hope this helps.

[zencracker]

Thank you so very much! It works. Now I have to figure out how to style, or what css to use to call just for the category pages, to increase the margins on the paragraph copy. Here’s what the page looks like:

http://liquescencemedia.com/category/secrets-and-first-tastes/

The h2 headlineis fine but how do I change the <p> style to add margins or padding?

Again, many thanks! You guys rock!

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-iso-container-posts.cols-3 .p-meta {
    padding: 2%;
}

Hope it helps 🙂

[zencracker]

Hello again. Well, I tried that code but it didn’t increase the padding on the <p> style on the description on category pages. I was looking for a way to change only that element. What do you think we can do?

http://liquescencemedia.com/category/secrets-and-first-tastes/

You can see on the page that with the code added the text under the h2 heading still doesn’t have any padding left or right.

[Rue Nel]

Hello There,

Thank you for getting back to us. Please have this code updated and use this instead:

add_action('x_before_view_global__index', 'display_category_description');
function display_category_description () { ?>
<?php if(is_category()): ?>
  <div class="cat-desc">
    <div class="x-container max width">
    	<?php echo category_description(); ?>
    </div>
  </div>
<?php endif; ?>
<?php }

And then you can use this custom css in the customizer,

.cat-desc h2 {
   // your styling here
}

.cat-desc p {
   // your styling here
}

We would loved to know if this has work for you. Thank you.

[zencracker]

Excellent! Worked great and thank you so much!

[Darshana]

Glad we were able to help 🙂

[Author]

Posts