category in featured image

[patfancygirl]

On the Magazine Pro theme, the featured images have the date inside it. Is there a way to replace that with the category instead?

I found the jquery file used in the theme for the date:

jQuery(function( $ ){

    // add js body class
    $('body').addClass('js');

    // find time for each entry and move it inside the image link
    $('.home-middle article, .home-top article').each(function(){
        var $time = $(this).find('.entry-time');

        $(this).find('a.alignleft, a.alignnone, a.alignright').append($time);

    }); 
	
});

Does anyone know how to replace it with category instead? Thanks in advance!

[Tonya]

Hello,

Absolutely you can do this. There are a few steps here. Please follow them in order:

1) Go to Appearance > Widgets > and expand out both the Home -Top and Home - Middle widget areas. This is where your featured widgets are located. Now expand those out too.

a.) Just below "Show Post Info" is an text field where it says [post_date] By [post_date] By [post_author_posts_link] [post_comments]. You can change this to: By [post_author_posts_link] [post_comments][post_categories before=''].
b) Click on Save
c) Repeat for the other featured post widget.
d) If you want the date listed under the title, simply add [post_date] back into the above text field where you want it to appear.

2) Now open up your style.css file and search for '.js .content .home-middle a .entry-time', it's on line 966. You want to change this to be:

.js .content .home-top .entry-categories,
.js .content .home-middle .entry-categories {

Notice that we are now including the entry-categories for styling instead of the .entry-time. Save the file.

3) Now you need to edit the js/entry-date.js file. Simply copy and paste this code in:

jQuery(function( $ ){

    // add js body class
    $('body').addClass('js');

    // find time for each entry and move it inside the image link
    $('.home-middle article, .home-top article').each(function(){
        // var $time = $(this).find('.entry-time');
        //* Swapping out time for categories instead
        var $categories = $(this).find('.entry-categories');

        $(this).find('a.alignleft, a.alignnone, a.alignright').append($categories);

    }); 
	
});

Notice that $time is commented out and we search for $categories in the DOM and append it inside of the image area.

4) Is this site live? If yes, then you need to uptick the CHILD_THEME_VERSION, which is found in your functions.php file. Here is an article that explains all about it.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[patfancygirl]

Thanks Tonya! You are a genius!

[Tonya]

[blush][blush]

You are so very welcome! I'm always glad to help out.

Enjoy the rest of your day/evening/night,
Tonya

P.S. If you would be so kind as to mark this topic as Resolved, all of us here would appreciate it. Thank you 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[patfancygirl]

Hi Tonya,

The categories are showing up below the featured image, not on top of it. I'm not sure what I did wrong.

[Tonya]

Hello,

Share the link to your website and I'll take a look.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts