[Support request] Last post in Page header

[Rodrigo]

Hello,

I am trying to add the last post of a category in the page header, following this design: https://ibb.co/9sWYznM

I am using WP Show Posts as suggested here, but I have some other elements that need style and I can’t do it with the options the plugin gives me.

I have a secondary title plugin activated for this posts. How can I visualize it through WP Show Posts?
Image must occupy half of the screen. How can I specify that in % (not in px)?
How can I style the title (a secondary title) just like the image? I can’t add a class to the element via the plugin.
Why is there a space a the bottom of the image? I have 0px padding on the Page header options.

Is there another way I could do this without using the WP Show Posts plugin?

Thanks in advance for the help.

[Tom]

Hi there,

How does the secondary title plugin work? Do they give you a function you can use? Does it use a custom field?

To make the image take up half the width, you can do this:

#wpsp-332 .wp-show-posts-image img {
    width: 100%;
}

#wpsp-332 {
    max-height: 400px;
    overflow: hidden;
}

I’m not seeing any additional space below the image?

[Rodrigo]

I already fixed the aditional space below the image by using one of the styles provided in the beta version.

This is the plugin I’m using for secondary title: https://wordpress.org/plugins/secondary-title/

Checking on their documentation, the plugin use a function: https://thaikolja.gitbooks.io/secondary-title/functions.html, but I don’t know how to add it to the shortcode generated by WP Show Posts.

[David]

WP Show Posts has it own set of hooks:

wpsp_before_wrapper
wpsp_before_header
wpsp_before_title
wpsp_after_title
wpsp_before_content
wpsp_after_content
wpsp_after_wrapper

You can use the Hook Element to call your secondary title function. Then from the Hook List – select Custom Hook and then add one of the hooks above.

[Rodrigo]

Fantastic! This worked like a charm…

BTW, I didn’t know WP Show Posts has its own set of hooks. This gives an extra value to this plugin (I hope you continue adding more features to it…)

One last question? How can I add a hook to a WP Show Post specific list? (dunno if this question should post it here or on the plugins’ support)

I want to add the secondary title to a list, but can’t find it in the Display rules of the hook.

Thanks!

[Tom]

If using Elements, you’d need to target the specific page the list is on.

If you need to target a list, you need to use a function instead of Elements.

For example:

add_action( 'wpsp_before_wrapper', function( $settings ) {
    if ( 123 === $settings['list_id'] ) {
        // Stuff in here will show up for list "123"
    }
} );

[Rodrigo]

Hey,

Can I add this function as a hook or should I install code snippets?

Also, I could tell there is another hook for this plugin: wpsp_inside_wrapper. Good one!

[Rodrigo]

Seems I didn’t read well, so I have removed the Element and built the next Code Snippet to show an specific SVG image before the title of the list:

add_action( 'wpsp_before_title', function( $settings ) {
    if ( 340 === $settings['list_id'] ) {
		wp_get_attachment_image( $attachment_id(67));
    }
} );

I don’t know well PHP so I believe my code is somehow wrong, because is not showing anything in the page.

Can you check it?

[David]

check that the function is working with something simple eg.

add_action( 'wpsp_before_title', function( $settings ) {
    if ( 340 === $settings['list_id'] ) {
		echo 'This hook is working';
    }
} );

If the message is visible then the function is correct.
Then we can help with how you get the SVG.

[Rodrigo]

Hello David and Tom,

I finally achieved to implement this solution, but from a different approach. Instead of adding an SVG at wpsp_before_title, I added a PHP call to the secondary title and styled it with CSS, hidden it from the list where I wanted it to show.

Hook:
<div class="sub-last-podcast"><?php echo get_secondary_title(); ?></div>

CSS:

.sub-last-podcast {
    display: inline-block;
    font: 700 17px 'Poppins';
    color: #6935A1;
    background-color: #89BF62;
    border-radius: 25px;
    padding: 10px 20px;
    margin-bottom: 10px;
}

#wpsp-340 .wp-show-posts .wp-show-posts-entry-title h2 {
    font: 800 36px Poppins;
}

#wpsp-114 .sub-last-podcast {
    display: none;
}

However, now that secondary title is appearing just before the title, with the same properties. Do you know why this is happening?

[Tom]

I’m not too sure what you mean – which same properties, exactly?

[Rodrigo]

I mean, it has the same style than the title and is next to it, instead of above it. You can see the bug in this screenshot: https://ibb.co/16YRDmk

As you can see, the secondary title is both above and next to the main title.

[David]

Hi there,

can you provide a link to where we can see the issue ?

[Rodrigo]

Yes, sure: https://www.subversivas.com/podcast

[David]

Looks like this to me:

[Author]

Posts