Page Design

  • Hi Guys, still learning,

    My site has three pages, “About”, “Gallery”, and “Blog”.

    The changes I made to my .post in my stylesheet have appeared on all the pages, but I wanted this style only on my “Blog” page. So what is the best way to style each page? My search has turned up using categories like this:

    <?php if (is_category('tomato')){echo 'class="tomato-red"';}
if (is_category('cucumber')){echo 'class="cucumber-green"';} ?>

    Another site said to create different index.php files, confused as to best solution.

    My site is using a static front page with the Blog page acting as my posts’ page.

    Thanks

Viewing 14 replies - 1 through 14 (of 14 total)
  • natko

    (@designers-chair)

    If “blog” is a page just make blog.php in theme folder and style it as you wish. Copy everything you need from page.php (like get_header(); and get_footer(); for example) and change the rest.

    About and Gallery will have the same style (from page.php), and Blog will have it’s separate style (from blog.php).

    Thread Starter macart

    (@macart)

    How is this done when any change to .post in the css is applied to every page?

    Thread Starter macart

    (@macart)

    How do you design the pages differently? Since .post in the css effects every page? Am I missing something?

    I think what designers chair is suggesting… “just make blog.php in theme folder and style it as you wish“.

    ..is that you take your newly created page template and give it a different style by changing the class in your new page template from “post”, to something else. Then define your new class by adding it to your style sheet.

    Thread Starter macart

    (@macart)

    My site is using a static front page with the Blog page acting as my posts’ page. I’ve setup a page.php and have my index.php. Index.php is for my blog and page.php is for the other static pages.

    If I take out the info below out of my page.php then it doesn’t pull in the page I have setup.

    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <div class="post">
        <h2><?php the_title(); ?></h2>
        <div class="entry">
        <?php the_content(); ?>
        </div>
        <!--End Entry-->
        <span class="editthis"><?php edit_comment_link('FIX THIS'); ?></span>
        </div>
        <!--End Post-->
        <?php endwhile; ?>
        <?php else: ?>
        <h2> Not Found</h2>
        <p> Sorry what your looking for isn't here, please try again!</p>
        <?php endif; ?>

    How do I pull in my pages, about, etc. What do I change in the code above? So that I can style my .posts separately from my pages?

    Thread Starter macart

    (@macart)

    How do you design pages separately from posts, when .post in the css seems to be on every page created in wordpress?

    what they are suggesting…is you need to make a page template
    https://codex.www.ads-software.com/Pages#Page_Templates

    so, you can make a page template (if you want it to function the same as your current page.php just copy the code from page.php to the new template)

    In this new template, change <div class="post"> or whatever needs changed to some new tag….something as simple as post2 (you can now add these new tags to style.css and apply your desired styling)

    Assign this new template to the page you want to be styled differently from the drop down menu within the edit page interface

    Thread Starter macart

    (@macart)

    This is how wordpress controls the page and post designs in css? WordPress seems smarter than this, seems like this would already be built in solution that I’m missing.

    this IS a built in solution

    wordpress usually uses index.php to control your blog post page

    it uses page.php to control your individual pages as a whole

    it also uses other standard templates to control display of certain things based on template heirarchy
    https://codex.www.ads-software.com/Templates_Hierarchy

    when you want a custom look to certain pages, that’s when you make a page template

    @macart,

    All of the suggestions you’ve been given seem reasonable and acceptable. I’ll offer another option though. Since version 2.8 WordPress has had a function called body_class which inserts all kinds of location specific classes into the <body> tag of each page. Using those classes you can easily target your CSS to most pages. To get this working your theme needs to call the body_class() function. The link provided explains how to do that. The benifit is that by using the body_class() function you should only have to create templates when you make changes to page structure– adding or subtracting divisions, adding sidebars, etc..

    Thread Starter macart

    (@macart)

    Coolio! Thanks for the help everyone!

    Thread Starter macart

    (@macart)

    Ok Ive set up my page with a blog.php, index.php and a page.php file.

    My home page is displaying my blog posts, instead the info on the “home” page I have created in pages. How do I change this?

    Thanks

    Thread Starter macart

    (@macart)

    Can this be done without going into my settings and changing the Front page displays in dashboard? Can I display my page “home” in my pages without going into settings?

    I have followed option 2 here:
    https://www.nathanrice.net/blog/creating-a-blog-page-with-paging/

    Thanks

    Go to Dashboard/Settings/Reading and select “Front page displays” a static page and then select your frontpage and your posts page.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Page Design’ is closed to new replies.