Using different themes/styles for different site sections/topics

(Rob) #1

I am working on a web project that involves the site to have different sections/topics.
The site is divided into sections based on the sports it covers. Football, baseball, soccer, etc. I’m trying to give each section a different look so each section is distinct but still feels like it’s part of the same site. For example, the header background for each section will have a different image to represent that sport, in addition, the color will be different for each sport. For example, baseball will have a blue theme (links and button will be blue in color).

I’m trying to pick the best strategy.
The way I see it there are two ways to go about it. One is to design a different template per sport but for some reason this doesn’t seem like the best approach. The other strategy is to create a different theme per sport.

I’m leaning towards
creating multiple themes (For my theme I’m using Genesis Framework with child themes by the way) and using the WP Multiple Theme plugin to call the correct theme to the different sections/sports.

I think this will work but the only challenge I see are pages that are auto-created and I don’t have control over.
For example BuddyPress profile or WooCommerce pages. From whatever sport/section the user is in when they click to look at a BuddyPress profile or go to WooCommerce checkout that takes them to that page. These pages are auto-generated and not associated with any section/sport. My only solution design wise is to make them plain and not associated with any sport/section.

Want to get feedback on this strategy and hear if anyone has used this plugin. :relaxed:

(Miroslav Glavić) #2

multi site could help you here.

I am the techie (as I get called) for an European news site and each section had a different theme.

So easy to manage.

(Rob) #3

@MiroslavGlavic you have a good point but I should have mentioned that WP Multisite will not be used for this site. But I see what you’re saying you can have a different theme for each site.

(Leland Fiegel) #4

If you’re just changing colors and background images, you can do it all with custom CSS. I wouldn’t mess around with any complicated “multiple themes” plugins since it seems a bit overkill for what you want to accomplish.

The body class function is pretty versatile out of the box, but I’m not sure how it would work with WooCommerce or BuddyPress pages.

I’m sure any additional body classes you’d need could be added with some creative conditional tags though. Underscores has a few examples of adding custom body classes. You also might need WooCommerce conditional tags and BuddyPress conditional tags.

(Hesham) #5

I think the first step is to design the website structure, if I had to do this, I would go with a Custom Post Type for each section. It’s really simple as that…

If you create a post type named Football, WordPress outputs an additional body class like this:

single single-football postid-357

This will allow you to override styles of each post type simply via CSS, I suggest when you do that, try adding your sections styles to the main child theme styles.css file, so your page will still load fast!

WooCommerce and BuddyPress are based on custom post types, for example: you will find a body class called single-product that you can use to style single product pages.

In addition, and since you are using Genesis Framework (Which is great!), you can even create custom templates for each post type and archives. Another advantage is the ability to add a custom body class -within the Layout Settings post meta- to any individual page and give it its own unique style.

I am not sure about styling WooCommerce and BuddyPress depending on which section this user is coming from (if I get this right), if you must do that, you may want to consider URL parameters.

Probably you can append the post type “name” or “slug” (or whatever custom class name) to the check out page URL as a parameter, then check with $_GET whenever this parameter exists, add it via Genesis’ body class filter, and take it from there.

I hope this helps.

(Rob) #6

@leland and @hishaman thanks for the replies and I now have a lot to digest and study up on.

I found this great intro article about body class at WPBeginner if anyone else wants to learn.

@hishaman you’re saying that WP automatically creates body classes in some cases (or probably in all cases). Do you think that instead of using post types if I created pages with categories I could achieve the same results. Just instead of relying on custom post types I use categories?

Also, in my original post I said

My only solution design wise is to make them plain and not associated with any sport/section.

This is regarding the WooComemrce and BP pages. I meant that I can design these pages not to be associated with a style/sport, they can be generic. Lucky for me in my case this will actually work.

But I see what you’re saying that you would need to use URL parameters if you wanted those BP and WC pages to match the style of the sport the user is viewing when they clicked on links to view the BP and WC pages.

(Hesham) #8

Yes, for every custom post type, WordPress shall append a unique body class “single-postype”. So, that would be in all cases.

You can go with categories as well if you like, WordPress in this case will append a body class “category-slug”. Where “slug” is the category slug.

For WooCommerce and BP pages, of course if you could just keep it simple, it would be easier and still cool :wink:

(Leland Fiegel) #9

Whoops, missed that. In that case, you should be able to do everything with the body classes WordPress ships with out of the box. I’m not 100% sure, but I bet BuddyPress and WooCommerce have their own all-encompassing body classes you can target.[quote=“r083rt, post:6, topic:1816”]
you’re saying that WP automatically creates body classes in some cases (or probably in all cases)

A good way to get an idea of the body classes output on different types of pages is to simply view the source of each one. Just search for the opening <body class="[…]"> tag.

(Rob) #10

I have a test page and it’s a custom type and has a category assigned to it. The custom post type appears as the following class “single-baseball-listing”. BUT even though I assigned it a category, the category does not show up as a class. The category is “Testing”.

Will try troubleshooting some more as to why categories do now show up as a class in the body tag.

Here is the body class for this test page:
class=“single single-baseball-listing postid-27626 logged-in admin-bar wp-custom-logo bp-member-types header-full-width full-width-content et_divi_builder js js customize-support shiftnav-enabled shiftnav-lock”

(Rob) #11

Got it to work. Categories does not get dropped in by default. I had to add the following code to my function.php file as per

// add category nicenames in body and post class
function category_id_class( $classes ) {
	global $post;
	foreach ( ( get_the_category( $post->ID ) ) as $category ) {
		$classes[] = $category->category_nicename;
	return $classes;
add_filter( 'post_class', 'category_id_class' );
add_filter( 'body_class', 'category_id_class' );

(Miroslav Glavić) #12

out of curiosity, why not Multisite?

(Rob) #13

Hi @MiroslavGlavic, here’s the main reason:

When Not to Use a Multisite

The sites in a multisite operate as separate units with not much overlap. So, if all you want is a collection of sites that share data and users, then a multisite is not for you. If your only requirement is for your webpages to look different, that can be achieved by using a plugin that switches between themes. If it is only to have various access levels for different users, you can restrict capabilities, link URLs or switch users and menus simply by using plugins.

You should also skip multisite if the site admins want to be able to add themes and plugins freely, or if they do not wish to share server space or database. Same would be the case if they want to go with different hosting services providers.

In my case I need to share data and users across the entire site. This would be harder to achieve if using Multisite