[Support request] More meta content in WP Show Posts

[Adam]

Hello!

I am trying to achieve the same effect as the cards on this page using a combination of GeneratePress and WP Show Posts Pro – http://squamishbarbell.com/coaches/

I can’t pull any information besides the post title and excerpt for each one of my “coach” posts. Is there a way to pull more custom fields into the WP show posts field or another plugin you’d recommend to achieve the desired effect?

Thanks!
Adam

[Elvin]

Hi,

You can follow the examples on ACF’s documentation found here:
https://www.advancedcustomfields.com/resources/code-examples/

Here are some important ones too:
https://www.advancedcustomfields.com/resources/get_field/ – for specific field
https://www.advancedcustomfields.com/resources/get_fields/ – multiple fields in array from a post.

As for displaying them on WPSP, you can use wpsp_ filters to place them in.

Example application:
https://wpshowposts.com/support/topic/different-featured-image-for-list-and-page/

[Adam]

This is really helpful! The ACF documentation is a little hard to sort through and find exactly what I need. Can you share the function I would need to run in order to pull in a custom field that I set up called “coach_name” and display on WPSP?

[Elvin]

You may find this reply useful:
https://generatepress.com/forums/topic/how-do-i-get-the-header-on-the-category-pages/#post-1440100

As shown in a snippet within the reply, we use get_field('your_custom_field_slug_here');.

Displaying things in WPSP requires filter.

Say for example, you want your custom field to appear before the WPSP’s title, in that case you’ll have to use wpsp_before_title filter for your PHP code snippet.

Example PHP Snippet:

add_action('wpsp_before_title', function(){
echo get_field('coach_name');
});

This PHP snippet will display whatever is in the field “coach_name” before the title on WPSP.

[Adam]

Thanks again! I am making progress.

How do I display the meta-data only when hovering over the image using one of the card overlay styles? I.e. default state is just the image and hover state is the coach_name and other meta information I want to pull in through custom fields.

[Elvin]

How do I display the meta-data only when hovering over the image using one of the card overlay styles? I.e. default state is just the image and hover state is the coach_name and other meta information I want to pull in through custom fields.

You can try adding this CSS:

Example: (using overlay style 1)

/* Hides the contents */
.wpsp-content-wrap {
    opacity: 0;
}
/* Displays the contents on hover*/
.wpsp-content-wrap:hover {
    opacity: 1;
}

[Adam]

Having trouble getting that solution to work. I have my custom fields in their own div sections which is what I think is causing it to not work.

Here is the CSS I’m using for my divs coach_name, coach_experience and coach_tagline

.coach_name {
  padding-left: 10px;
	text-align: left;
	color: #ff6600;
	background: rgba(0, 0, 0, 0.9);
	font-size: 30px;
	font-weight: 600;
}

.coach_experience {
	text-align: left;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.coach_tagline {
	text-align: left;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

And here is a link to how the posts appear now: https://ibb.co/87HCSnW Any other suggestions for getting the content to show only on hover?

Thank you!
Adam

[Elvin]

Any chance you can link us to the site in question to see how your WPSP list is structured?

So we could see which selectors to best use in applying this. thank you. 🙂

[Adam]

It’s in dev with WP Local – does this link work? http://eb82925b7872.ngrok.io/coaches/

[Elvin]

I’m seeing it. Thanks.:)

We can address this by creating a Hook Element with Display Rule Location set to the page where you put this WPSP list.

More about GP Premium’s Hook Element here – https://docs.generatepress.com/article/hooks-element-overview/

We then add this code:

<style>
/* Hides the contents */
.wpsp-content-wrap {
    opacity: 0;
}
</style>

<script>
var wpsp_list = document.getElementById('wpsp-7');
var wpsp_article = wpsp_list.getElementsByClassName('wp-show-posts-single');

for(i=0; i<wpsp_article.length; i++){
    wpsp_article[i].addEventListener("mouseover", function(){
        var wpsp_contents = this.querySelector('.wpsp-content-wrap');
        wpsp_contents.style.opacity = 1;
    });
		wpsp_article[i].addEventListener("mouseout", function(){
        var wpsp_contents = this.querySelector('.wpsp-content-wrap');
        wpsp_contents.style.opacity = 0;
    });
}
</script>

And set the Hook dropdown value to “wp_footer” as shown here: https://share.getcloudapp.com/E0urD0zL

Note: if in case you replaced your WPSP list, you must change the document.getElementById('wpsp-7'); value within the script. Replace wpsp-7 with your WPSP list id which can be found on the right hand side of the screen when you’re editing the WPSP list settings.

[Adam]

Thanks Elvin, that worked great! It looks good on Desktop but when I view on mobile the meta content doesn’t seem to appear on hover. Any ideas?

Also – is there a way to disable the post links? I’m using WPSP to only display all of the meta data from the individual coach posts and not allow users to click through to an actual page.

[Elvin]

Thanks Elvin, that worked great! It looks good on Desktop but when I view on mobile the meta content doesn’t seem to appear on hover. Any ideas?

Ah of course. Touchscreen devices are pretty tricky as you don’t have a mouse that “hovers” over content.

For those, we’ll have to use “touchstart” and touchend”.

<script>
var wpsp_list = document.getElementById('wpsp-7');
var wpsp_article = wpsp_list.getElementsByClassName('wp-show-posts-single');
var x = window.matchMedia("(max-width: 768px)");

for(i=0; i<wpsp_article.length; i++){

    wpsp_article.addEventListener("touchstart", function(){
        var wpsp_contents = this.querySelector('.wpsp-content-wrap');
        wpsp_contents.style.opacity = 1;
    });

    wpsp_article.addEventListener("touchend", function(){
        var wpsp_contents = this.querySelector('.wpsp-content-wrap');
        wpsp_contents.style.opacity = 0;
    });

    wpsp_article.addEventListener("mouseover", function(){
        var wpsp_contents = this.querySelector('.wpsp-content-wrap');
        wpsp_contents.style.opacity = 1;
    });

    wpsp_article.addEventListener("mouseout", function(){
        var wpsp_contents = this.querySelector('.wpsp-content-wrap');
        wpsp_contents.style.opacity = 0;
    });

}
</script>

Also – is there a way to disable the post links? I’m using WPSP to only display all of the meta data from the individual coach posts and not allow users to click through to an actual page.

As this is a completely different topic, can you open a new one about it? you can open it on the WPShowPosts support forum. Thank you.

[Author]

Posts