Using the body_class and post_class functions within wordpress

Hi

Ok so I have a plugin installed at the moment which outputs each entry dynamically onto the front end of the site and I want all of these too look the same. Within the settings of the plugin I am able to choose to output in the post or page template and I have page chosen for this particular case as the layout suits my needs much more.

What I would ideally like to do here is apply some CSS to all pages dynamically generated by each event being created.

Within the plugin there are options to;

Body Classes
If you would like to add extra classes to your body html tag when a single event page is displayed, enter it here. May be useful or necessary if your theme requires special class names for specific templates.

Post Classes
Same concept as the body classes option, but some themes also use the post_class() function within page content to differentiate styling between post types.

I can enter these classes in the plugin settings and then I would like to add css to the .entry-content relevant to those specifically defined classes within the settings.

Could you help with explaining what I need to do to achieve this and how the outputted CSS within a plugin such as Simple CSS would need to look to only apply to those instances?

Lets use the following CSS as an example;

.entry-content {
   clear: both;
   border-style: solid;
}

Thanks

Wayne

  • Adam Czajczyk

    Hello Wayne,

    I hope you're well today and thanks for your question!

    It looks like the plugin you're using was made to make it easier for you to adjust events display style to your current theme style.

    The issue here is that plugin outputs some predefined HTML structure and this picks up CSS styles of your current theme. Normally, in order to customize that design you would want to:

    - inspect HTML source code with tools such as Firefox or Chrome Element Inspector
    - create set of rule
    - find a way to apply these rules specifically to this particular page

    That last element would most likely mean creation of a full custom page template

    In this case however, it's enough to add your own class name to body element and - in order to be able to target HTML elements more precisely - to post wrapper. Then, you could use it like this:

    - let's say that for "body classes" you used "my-event-page" and for "post classes" you used "my-event" clas names

    - you'd like to make page background green and default text color white for entire page:

    .my-event-page {
    background:green;
    color:white;
    }

    - but for post only (which would be your event) you'd like to make font bold and yellow:

    .my-event {
    font-weight:bold;
    color:yellow;
    }

    These CSS rules may be applied easily via a Simple Custom CSS plugin's "Custom CSS" box.

    So, what exactly happens here?

    1. By adding ".my-event-page" class name to plugin's settings, we made the page where events are displayed easily addressable with CSS so our custom CSS can be targeted precisely for this page

    2. By adding ".my-event" class to post element we are now able to equally precisely target only "events" instead of all posts and, even better, use different "general" style for entire page and different for "event" part of the page

    3. Finally, rules added via Simple Custom CSS will target only pages that include events (your plugin's output) .

    That's really handy feature as most themes do not include dedicated page templates for various plugins and this solution helps avoid custom page template (or even child theme) creation.

    I can enter these classes in the plugin settings and then I would like to add css to the .entry-content relevant to those specifically defined classes within the settings.

    Assuming your "body class" for the page is ".my-events" you should be able to do this:

    .my-events .entry-content {
       clear: both;
       border-style: solid;
    }

    I hope that helps!
    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.