Magazine Pro: Modify to Have Post Title Appear Instead of Date on Featured Post

[rogue]

Hi there, I am using the Magazine Pro theme. Instead of having the date appear as an overlay to my featured image at the top of the page I want to have the title appear. Has anyone had any luck modifying the functions.php file to do this with the snippet from studiopress on customizing post info (http://my.studiopress.com/snippets/post-info/)?

Thanks!

[Tonya]

Hello,

Before I start, here is a similar question and solution, albeit this one is swapping with the category for the date. But it gives you some of the explanation.

OK, so the date overlay onto the Featured Image is handled in jQuery in file magazine-pro/js/entry-date.js. Here is what is happening:

1) When the browser loads the page, the jQuery grabs the .entry-time HTML and moves it to within the <a> element, which is the image wrapper.

2) You want to change that behavior to move the .entry-title instead.

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 title instead
        var $el = $(this).find('.entry-title');

        //* Remove the a link tag wrapper from .entry-title
        $el.children('a').contents().unwrap();        

        $(this).find('a.alignleft, a.alignnone, a.alignright')
            //* Move .entry-title here
            .append($el)
            
            //* Replace the h2 with span tags
            .find('.entry-title').replaceWith(function() { 
                return $('<span>').addClass('entry-title').text(contents);    
            });        
    }); 
	
});

Notice that there is an extra line of code here to remove the <a> tag wrapper as this semantically incorrect, as the image + title are already wrapped by a <a> (we don't want to embed a link within a link).

Be aware that <h2> wrapped instead of a <a> is semantically incorrect. It should be changed to <span>. This is why the last couple of lines includes a .replaceWith() function, i.e. to swap out the h2 with span.

3) Now you need to style it. If you look in your style.css file on line 960, you'll find .js styling for the .entry-time. You want to change this to .entry-title instead as follows:

.js .content .home-middle a .entry-title, 
.js .content .home-top a .entry-title {

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

[rogue]

Tonya, thanks so much for the response. I am able to recreate you suggestions for the categories but when I try with entry_title it doesn't seem to work. Do I need to modify the section just below post_info? I tried the following language but it doesn't seem to work: By [post_author_posts_link] [post_comments][entry_title before='']. Also, do I need to modify Genesis Simple Edits?

Really appreciate your help!

[Tonya]

Hello,

Sorry I shouldn't have shared the initial category swap post as it probably confused you. Instead follow the steps that I laid out up above. Then in the Featured Post widget, make sure you have Show Post Title and Show Post Info selected (checked). I have for post info: By [post_author_posts_link] [post_comments][post_categories before='']. You can set it to what you want.

And you shouldn't have touch anything in Genesis Simple Edits.

If you are still having trouble, then please share a link to your website so that I can take a closer look.

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

[rogue]

Ahh, got it. OK, I will try that out. But I think that was my problem. So the title will show up now in the colored bar instead of below the pic, I take it. I got it to work for categories but the text shows up black even though it’s supposed to be white.

Thanks so much

[rogue]

Worked!

Thanks.

[Author]

Posts