Style Excerpt and Single.php Individually?

  • djmac14

    (@djmac14)


    12 years, 7 months ago

    Hey,
    I’ve done a lot of custom WordPress design and I’m above average in CSS/HTML. However,I know next to nothing about PHP. I’ve generally created WordPress Themes from scratch, but this time around I decided to use Twenty Thirteen as a bit of a “wireframe” if you will.

    The landing page is going to be the blog page with the last 10 blog post excerpts. This page will be full width with NO SIDEBAR.

    When you click “read more” or whatever to view the Single Post, I will have a sidebar.

    Deleting the “Get sidebar” from Index.php was easy.

    However, I would like to style the blog excerpt page (index.php) completely different than the single.php.

    It shares it’s CSS which is understandable. I figured I would just be able to go into the index.php and write completely different CSS identifiers for that page leaving the Single.PHP untouched. But, I can’t seem to edit the CSS or layout of one without effecting the other.

    I am sure this has to do with the PHP?

    You can see my “theme test” site here:

    Landing page/Excerpts (Full width/No Sidebar)
    http://dallasmclaughlin.com/sandbox

    Single post (WITH Sidebar):
    http://dallasmclaughlin.com/sandbox/dont-be-that-person-dont-let-it-happen/

    Any help on separating the layout/format of the single post and the landing page?

Viewing 1 replies (of 1 total)
  • CrouchingBruin

    (@crouchingbruin)

    12 years, 6 months ago

    If you read the documentation for the body_class() function, you’ll see that the body element will have different classes depending upon what type of page is being displayed:

    If the blog posts index is displayed on the site front page: home blog
    If the blog posts index is displayed on a static page: page blog
    Single post pages: single postid-{ID}

    So if you use either body.blog or body.single as part of your CSS selectors, you should be able to target your CSS rules based on what type of page you are displaying.

    For example, you say you want the blog page to display full width. You can add these CSS rules with body.blog as the first part of the selector:

    body.blog .hentry .entry-header,
body.blog .hentry .entry-content {
   max-width: none;
   padding: 0px;
}
body.blog .homepage .entry-title {
   float: left;
}

    And they won’t affect the single post pages.

Viewing 1 replies (of 1 total)

The topic ‘Style Excerpt and Single.php Individually?’ is closed to new replies.