Wpshowpost styling

Hi @srijithkariyattil

We can do this with CSS and PHP hooks.

but to clarify w/ functionality:

Are you trying to copy the functionality as well? If yes, I’m not exactly sure if WP Show Posts is the right plugin for this one.

The date doesn’t seem like a post date but rather, an event date.

In this case, I think what you need is something like The Events Calendar plugin.

But to answer your question:

Let’s remove the default date by unchecking it on the WP Show Posts list setting’s Meta tab.

You then re-add it back before the title and thumbnail using this PHP snippet.

add_action('wpsp_before_header', function($settings){
if( 18984 == (int)$settings['list_id']){ //apply to specified WPSP ID
	$time_string = '<time class="wp-show-posts-entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

			if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
				$time_string .= '<time class="wp-show-posts-updated" datetime="%3$s" itemprop="dateModified">%4$s</time>';
			}

			$time_string = sprintf( $time_string,
				esc_attr( get_the_date( 'c' ) ),
				esc_html( get_the_date() ),
				esc_attr( get_the_modified_date( 'c' ) ),
				esc_html( get_the_modified_date() )
			);
	
	printf(
				'<span class="wp-show-posts-posted-on wp-show-posts-meta">
					<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>
				</span>',
				esc_url( get_permalink() ),
				esc_attr( get_the_time() ),
				$time_string
			);
}
},10,1);

Once applied, let me know to reinspect the page and do the CSS writeup. ??

Hello,

Thank you for the reply. I have decided to go with a simple layout. Could you let me know how can I set up a layout with the post image on the left and the headline and other meta on the right for mobile? In the current version, the image comes in the center, and the headline and meta are below it for mobile.

Regards,
Srijith

Hello,

I figured that out myself. Is it somehow possible to apply a CSS to the category of the post shown above the headline. I would like to apply a border and a background color

Thanks
Srijith

I’ve checked your site and you seem to have already added the border. Do you still need help with this?

You can use this CSS example as a reference.

article.wp-show-posts-single {
    border: 4px solid red;
    border-radius: 20px !important;
    background-color: rgba( 25, 266, 20, 0.5);
    overflow: hidden;
}

Let us know. ??

Hi,

I would like to apply a background to the category text (E.g Finance) which is displayed above the title.

Regards,
Srijith

Hi there,

You can add custom styling to the custom entry meta you’ve added using this example CSS:

Example: Background color for category “finance”.

.wp-show-posts-entry-header a[href$="/category/finance/"] {
    background-color: red;
}

You’ll have to write more CSS for each category.

Example, you have a category ‘cryptocurrency’, you’ll have you write it like this:

Example: Background color for category “cryptocurrency”.

.wp-show-posts-entry-header a[href$="/category/cryptocurrency/"] {
    background-color: green;
}

Hi,

I applied this CSS and it didn’t work. Could you check it again?

Regards,
Srijith

I don’t see the CSS being added.

I’ve tested w/ Google Devtools just to be sure and the CSS is working as shown here –
https://share.getcloudapp.com/GGupmLZG

Can you verify if it was saved/added properly w/ cache cleared?