Author: Alexander Buzmakov
On one of the projects, I needed to separately stylize the display of a specific post in Easy Posts. I began to look for a solution and a wonderful WordPress function post_class() came to my aid, which displays the characteristics of the post in the form of css classes, such as post ID, post type, post category and post tag. And also we can add a special class for the current post and I want to talk about this in this article.
How it may look, see the screenshot:
When can post_class () come in handy in Easy Posts?
- Styling a single post by its unique class;
- styling posts by category or tag;
- hiding the current post - let's dwell on this in more detail.
Often, the site needs to show similar posts below or next to the main content, but when using Easy Posts, at the moment, in Oxygen there is no way to exclude the current post from the loop. As a result, we get duplication of information on the page.
As one of the simple variants, you can simply hide the current post using CSS. This is not ideal, because the post will actually be present in the code, but I think this is a good way out.
To do this, you need to assign a special class to the current post, and then add it to the stylesheet (in Code Block or Stylesheet) corresponding property.
Sample css code to hide current post: .current-post {display: none} - where "current-post" is the class that is assigned to the current post using the post_class() function.
How to add post_class() function to Easy Posts?
To add a function, you need to perform only one action. Switch to template editing mode (Easy Posts > Templates > PHP) and instead of a piece of code
<div class="oxy-post"></div>
add:
<div <?php post_class( get_the_ID() == get_queried_object_id() ? 'oxy-post current-post' : 'oxy-post'); ?>>So it looks in the editor:
It's all. Open the code inspector in the browser and check which classes are generated for each post. Now you can add any css for styling for individual entries, based on their classes.
An example of adding css to Stylesheet:
