0

Greeting Community,

Here’s my challenge: We have an annual report that is published annually. We do NOT want to spin up a new site and domain each year, but house each previous year’s edition on the same site.

The kicker is this — each year has a unique design but most of the site’s functionality and features remain the same. Is there a way to house each year’s report on the same site with a different stylesheet assigned to each group of annual report pages?

I’ve been able to create new post/pages in multiple languages that load various menus but haven’t had success in loading separate CSS to specific pages.

I’m relatively new at WordPress development and don’t want to use plugins and would like to write DRY code at the template level that conditionally call the proper stylesheet per the year in question and not have to worry about plugin/core compatibility or updates.

For example:

  • One group of pages/posts for 2017 have stylesheet enqueued (with its own menu); and
  • 2016 has a different set of pages/posts with another stylesheet, menu, etc.

Is this possible? If so, what is this called for research purposes. Is there documentation on doing so in the Codex? Is this considered enqueuing, other?

Thanks in advance for any assistance

1

One simple solution that might meet your needs would be to add the published year of the current post or page to your body using body_class(), and then add the appropriate styles for each year to your stylesheet.

Here I add a new css class to the html <body> element like ".year-2016" using get_the_date() to fill in the year. Note that you should always use body_class() in your body tag:

<body <?php body_class( 'year-' . get_the_date('Y') ); ?>>

I suspect this will be too simple and broad a stroke, and you will want to conditionally add this css class to your body only if it is a page or a single post the user is viewing, for example. Otherwise just load the body tag normally:

<?php if( is_page() || ( is_post() && is_single() ) ) { ?>
         <body <?php body_class( 'year-' . get_the_date('Y') ); ?>>
    <?php } else { ?>
        <body <?php body_class(); ?> >
<?php } ?>

Then in your main stylesheet you could style any menu's and other elements for posts and pages published in 2016. For example your main menu could have a different background color:

.year-2016 .main-menu {
    background: #0cf;
}

This method would be very dynamic, and requires little additional coding to implement the new CSS for your different year themes.

0

You could my answer here(or a modified version of it): https://wordpress.stackexchange.com/a/251113/110059

For example, you could add a custom field to the post(s) with the annual report, giving the name of the stylesheet, and use a modified version of my code to get the name of the stylesheet from the custom field(instead of getting the tag) and load it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.