Thanks, got it. Is it possible to have a different “.post” width on the ‘index’ vs. ‘page’ pages?
that’s possible, with a conditional style in header.php:
<style type="text/css" media="screen">
<?php
// Checks to see whether it is 'page'
if ( is_page() ) {
// on 'page' //
?>
.post { width: 640px; }
<?php } else { ?>
.post { width: 640px; }
<?php } ?>
</style>
add this into header.php after the lnes with:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
but before the </head> tag,
hey guys, just stumbled upon this, and am looking for something similar, but which is not gonna affect my front page which is two column, but the rest of my pages which are static and one column >?
look into how you could use ‘body_class()’ http://codex.wordpress.org/Template_Tags/body_class and then style your ‘whatevers’ using these extra classes.
thanks a lot for the link,
I am still not sure, of what you advice relate to ? Do you mean I should create a class that is related to just the page that I want to mod. with a wider width ? then use :
<style type=”text/css” media=”screen”>
<?php
// Checks to see whether it is ‘page’
if ( is_page() ) {
// on ‘page’ //
?>
.post { width: 640px; }
<?php } else { ?>
.post { width: 640px; }
<?php } ?>
</style>
with the new class I created ? and if so would that work if i stil put it in the header ? at the min, I have tried your solution which worked but unfortunately it only modifies the width of my front page.
body_class() will generate a few extra classes;
one of them being ‘.page-id-472’ where the number is the id of your page.
use this in style.css as you would use any other style:
.post { width: 640px; }
.page-id-472 .post { width: 790px; }
however, your approach would work as well, and you don’t need to use body_class() with it:
first – make sure that .post is really the css class that you need to change; try to use ‘is_front_page()’
<style type="text/css" media="screen">
<?php
// Checks to see whether it is 'page'
if ( is_front_page() ) {
// on 'front page' //
?>
.post { width: 640px; /*front page width*/}
<?php } else { ?>
.post { width: 640px; /*other static page width*/ }
<?php } ?>
</style>
a link to your site would help to be more specific.
thank a lot for the answer, no of it still work, but I blame it on my lack of knowledge 🙂 I am working on my site locally so can’t give you a link however this is the .php for the page I am trying to modify the width.
<?php
/*
Template Name: Shop
*/
php?>
<?php get_header(); ?>
<div id=”content_box”>
<div id=”content” class=”shop”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”entry”>
<?php the_content(‘<p>Read the rest of this page →</p>’); ?>
<?php link_pages(‘<p>Pages: ‘, ‘</p>’, ‘number’); ?>
</div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
I have just created my page on the dashboard, I am wondering if I am to specify something in the code, css or php to be able to tweak them ?
unless there are more divs with other classes/ids in header.php, you have these classes/ids that might influence the width of your page:
– #content_box
– #content .shop
– .entry
any/or several of those could be restricting/determining the width of your page.
(note that you don’t have a class .post – therefore any attempts to use the code snippets suggested could not work)
whoooooaaaaa thank you !
after a more or less long period of trial and error I enter the following CSS code in the stylesheet:
#content.shop { width: 770px; padding: 0 40px 0 0; float: left; }
worked wonders !
