Style a Wordpress Blog

I work for the CarQuest Auto Parts Network and Manage 3 company Wordpress Sites. Each site had a link to an external Blog on Wordpress.com. I have now taken away the external link and am in the process of creating 3 new internal blogs on these websites.

http://petespaint.ca/blog/        (This One Is Finished!!)

The other one is giving me hassle for some reason...

http://autobarn.ca/blog/

Here was my game plan:

1. Create a New Page on The WP Site called Blog
2. Create the Menu Link within Appearance > Menus Editor
3. Create a New Category for Each of my New Blog Posts -  Posts > Categories (I created a new one called Articles)
4. Create a New Test Post and assign it the to the new Category - Articles.
5. Under Settings > Reading I have set my (Posts Page : Blog)

Problem is my CSS is all messed up? When I do not set my Reading setting to go to the Blog Page the style looks fine. But if I set the Posts to go to the target page "Blog" it looses the CSS style for some reason.

Correct me if I am wrong but I thought the style for this page would be pulled from "archive.php" Which Has the following code within it:

<?php get_header();?>

<div id="content">
	<div class="wrapper">
    	<div class="content-left height">

<?php if (have_posts()) : ?>
<h2 class="pagetitle" style="padding-top:30px;">
		<?php if ( is_day() ) : ?>
            <?php printf( __( 'Daily Archives: %s', 'smartsalary' ), '<i>' . get_the_date() . '</i>' ); ?>
        <?php elseif ( is_month() ) : ?>
            <?php printf( __( 'Monthly Archives: %s', 'smartsalary' ), '<i>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'smartsalary' ) ) . '</i>' ); ?>
        <?php elseif ( is_year() ) : ?>
            <?php printf( __( 'Yearly Archives: %s', 'smartsalary' ), '<i>' . get_the_date( _x( 'Y', 'yearly archives date format', 'smartsalary' ) ) . '</i>' ); ?>
        <?php elseif(is_tag()) : ?>                
            <?php 	printf( __( 'Tag Archives: %s', 'smartsalary' ), '<i>' . single_tag_title( '', false ) . '</i>' ); ?>
        <?php elseif(is_category()) : ?>                
            <?php	printf( __( 'Category Archives: %s', 'smartsalary' ), '<i>' . single_cat_title( '', false ) . '</i>' ); ?>
        <?php else : ?>	        
            <?php _e( 'Blog Archives', 'smartsalary' ); ?>
        <?php endif; ?>
    </h2>
<?php  while (have_posts()) : the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>




</div>

<div class="content-right height">
        	<?php get_sidebar(); ?>
        </div>
        <div class="clear"></div>

</div>
</div>
 

<?php endwhile; else: ?>

<?php _e('Not found.'); ?>

<?php endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Open in new window



The Elements that are missing when I compare the two blog pages are this:

<div id="content">
	<div class="wrapper">
    	<div class="content-left height">

<div class="story">
				<div class="story_title"><h3><a href="http://petespaint.ca/custom_car_paint/" rel="bookmark">Custom Car Paint</a></h3></div>
				<div class="lt_date">Posted on  February 6, 2015</div>
				<div class="storyContent">

Open in new window


The autobarn site only displays this code:
  <div class="breadcrumbs">
    	<div class="wrapper">

Open in new window


and other elements at the end of the page to move the page around into the proper DIV's?   I don't know why the css is not being called into the Blog - Post Article when I can see it in the Editor under Archives, but it is not getting through to the front end display. This is the second one I create and not too sure if this is the right template page to edit or if some other setting is not being called.

I am using Ultimate Blog Roll on the other sites for my Wordpress Plugin, but I have not installed it yet on this second site until I can figure out the CSS problem.

thanks for your help!!!


Signed, "Bad Motor Finger."
fadercreepAsked:
Who is Participating?
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hello fadercreep,
The archive template is for showing a list of posts by day, month, year, tags and categories. It is not the home of your posts listing.
The blog posts list is generated in index.php file. Upon viewing this file you may find it quite sparse, because the content loop may be an include. Look for "get_template_part()" and you get a few clues to the name of the template. So now you need to go and find that piece if you'd like to edit it. There may be several loops in it, conditionally, depending on whether a page, post excerpt or single post is being shown.

Please post the contents of your index.php and I can see the lay of the land better. And if you have a file called home.php, then that is more specific and targets the posts list only. That's the one you want to hit if you see it!

I highly suggest you review the WordPress Template Hierarchy. This act may save quite a bit of your hair.
0
 
rgranlundCommented:
The Wordpress engine normally pulls from the style.css file that is in your theme folder, in the same folder where your index.php file is.  Unless of course you have referenced another style sheet in the head.  Also, is that style sheet referenced in the head.  The archive file is for older posts on your site.
0
 
fadercreepAuthor Commented:
This is standard information, if you read the above code I am looking for the right Theme Page to Edit to get this into the code:

<div id="content">
	<div class="wrapper">
    	<div class="content-left height">

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
rgranlundCommented:
Without looking at your code, I would suggest you look at the following templates;
page.php
single.php
archive.php
index.php

One of those should be the page generating your current page and you can adjust from there.  Sorry if this is not more help.
0
 
fadercreepAuthor Commented:
this is getting close.

The interesting thing here is, If I turn off the Post to the Blog Page, then the design is correct.

But if I assign all posts to the Blog Page it changes the look of the front end display. Is there a way to tell which page is using what template?
0
 
rgranlundCommented:
Place something like <?php echo "Hello World"; ?>  in each of the templates until you find it.  Also check the header.php to make sure it is not controlling the template output of those few divs.  Also outside chance, look at the sidebar.php
0
 
fadercreepAuthor Commented:
Thanks Guys, after comparing the two blogs from the 2 websites I was able to find the missing DIVs and place them into page.php, index.php ect...as labeled above.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.