Mixing full width layout with the default layout for post list

There is not currently an option for this, but I have been getting more requests for it so I may add it into an upcoming update.

However, if you’re comfortable working with some code, I can help you get it working now. The full-width layout will actually be the easiest to do this with, but I have to warn you this will get a bit messy.

The best way would be to use a custom post type for your photography posts because it will be more organized in the backend and also provide you with class you can use to specifically target them with CSS on the frontend.

Due to the way the full-width posts are styled, you will need to copy the styles from the full-width stylesheet (found here on Github) and override them specifically for photography posts.

For instance, if the photography posts had a “photography” class added, you would take this CSS:

.full-width .excerpt.even .featured-image,
.full-width .excerpt.even .featured-video {
  right: 0;
}

And return the property to it’s value from the standard layout like this:

.full-width .excerpt.even.photography .featured-image,
.full-width .excerpt.even.photography .featured-video {
  right: 50%;
}

Due to the increased specificity, it would override the full-width layout styles for photography posts only.

I am going to have more photography gallery posts then full width blog posts. So wouldn’t make more sense to use the custom post type for the full width ones and do kind of the reverse of what you suggested. Then the site would be doing less processing because 80% of the posts will be formatted the standard way

something to this effect

$isfullwidth = has_category("fullwidth", $post);
  if ($isfullwidth === True) {
    //add .full-width class to div.post where needed
  } else {
    //output div.post as normal
}

this could be in the content post loop or its own function that is called in the loop that returns the string of text that needs to be added to the div to apply the full=width class.
Then any post apart of whatever category in this case”fullwidth” would use the full width layout. You could actually take this further and add an options in the admin settings to specify what category you want to use for each layout.

I do not know how you output each post and apply classes to them otherwise I could probably implement this

Okay I see. I was thinking the posts may all be integrated in the blog, but this will be easier for changing all posts in one category page.

You would activate the full-width license to unlock the layout, and then activate it in the Premium Layouts section in the Customizer as well.

Now the full-width stylesheet will be enqueued and the “full-width” class will be added to the body element causing all the posts to have the full-width styling.

Next, add the following code to your child theme:

function my_remove_body_class( $classes ) {

  if( !is_category('5') ) {
    unset($classes['full-width']);
  }
  return $classes;
}
add_filter( 'body_class', 'my_remove_body_class', 19 );

This will remove the “full-width” class from the body element unless you are viewing the category with an id of 5. You’ll just need to replace the “5” with the id of the category you want to use the full-width layout on. Then, all other categories will be displayed normally.

I think we are getting closer but not exactly what I’m looking to do. I want the layouts to mix into the post list like this

(photoshop created)
https://www.momentsafterdark.ca/wp-content/uploads/2015/03/tracks-mixed-theme-post-layout.jpg

So any post apart of a specified category or has a specific tag/post type whatever I wanna use (category is probably the easiest) it will change the css for that post in the list.

function my_add_post_class( $classes ) {
  $my_post_class = 'full-width';
  if( !is_category('5') ) {
    $classes[] = $my_post_class;
  }
  return $classes;
}
add_filter( 'post_class', 'my_add_post_class' );

would that work by just adding it to the functions.php after I purchase the full width. Thinking if I had the regular theme enabled with the full width unlocked after putting in the license?

So I purchased the full width layout tried your code(assuming I add it to functions.php) and tried mine.

Your code just does not work even if I’m viewing the category archive page. My code also doesn’t work. both however do update the classes for the respected elements. It just seems to have no effect.

Okay I’m sorry, I misunderstood with my last response. In this case, the process outlined in my first response will work.

The way the CSS is written, the presence of the “full-width” class on the body element is what allows the posts to be styled differently (eg .full-width .excerpt-container). This is why adding or removing classes on the individual posts won’t have any affect.

You’ll need to override the full-width styles on the posts you don’t want to be full-width.

hmm ok im trying to make that work using the category class category-events-galleries

something like this

.full-width .excerpt.even .featured-image .category-events-galleries,
.full-width .excerpt.even .featured-video .category-events-galleries {
  right: 50%;
}

that does not produce any effect though

ok so I got the styles from the full-width css you linked above (I only changed the full width ones for now)

and copied the values from the standard layout put this css in the customizer and it still does not work

.full-width .category-events-galleries .excerpt.even .featured-image,
.full-width .category-events-galleries .excerpt.even .featured-video {
  right: 0;
}
.full-width .category-events-galleries .featured-image {
    height: 100%;
    padding-bottom: 0;
    position: absolute;
    right: -1px;
    transform: translateZ(0px);
    width: calc(50% + 2px);
}
.full-width #main .category-events-galleries .excerpt-container {
    padding: 0 5.55%;
    width: 50%;
}
.full-width.full-post .category-events-galleries .excerpt-content {
  text-align: center;
}

Blah

ok that works but when I click on a post the featured image is all out of wack

ok this css will make all posts of whatever css class you want display in the default layout. All other posts will use the full-width layout.

Just paste it in the custom css field in your customize section.

.home .archive, .full-width .YOUR-CSS-CLASS-HERE .excerpt.even .featured-image,
.full-width .YOUR-CSS-CLASS-HERE .excerpt.even .featured-video {
  right: 0;
}
.home .archive, .full-width .YOUR-CSS-CLASS-HERE .featured-image {
    height: 100%;
    padding-bottom: 0;
    position: absolute;
    right: -1px;
    transform: translateZ(0px);
    width: calc(50% + 2px);
}
.home .archive, .full-width #main .YOUR-CSS-CLASS-HERE .excerpt-container {
    padding: 0 5.55%;
    width: 50%;
}
.home .archive, .full-width.full-post .YOUR-CSS-CLASS-HERE .excerpt-content {
  text-align: center;
}
.singular-post.full-width .featured-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  right: 0;
}

To use all posts within a category use .category-NAME
for all posts with a certain tag use post_tag-TAG

Nice! Is that working well for you now?

Works exactly as needed. Now to make it if I purchase additional layouts and want to mix them all together hmmmm…

Haha great, let me know if you need anything else ??