WordPress Tutorials Index | Web Page Design Tutorials Home

Modify Width of WordPress Blog Website

According to the statistic shown on W3Schools.com, 99.9% visitors nowadays are using a screen resolution higher than 1024×768 pixels. Therefore this is quite safe to use web pages with 900 pixels to 960 pixels in width.

Most blogger like to place a 728×90 Leaderboard Ads on the Header next to the logo. Take a look at the following WordPress design:

Modify width of wordpress website

The Leaderboard Ads take a width of 728 pixels. The width of logo should not be too small, 220 pixels should be the minimum width, otherwise the logo will be too small. Then the Leaderboard and logo together already take a width of 948 pixels. Actually, some space or padding is required between the logo and the Leaderboard, for example 10 pixels. Therefore a reasonable width of this WordPress Blog design should be 960 pixels as shown in the diagram below:

Modify width of wordpress website

Modifying Width of WordPress Blog Design

Let’s see how to change the withth of WordPress Blog design from 940 pixels to 960 pixels.

Obviously, the first step is change the width of wrapper.

WordPress wrapper width

Change the width of wrapper to 960 pixels:

#wrapper {
    margin: 0 auto;
    width: 960px;
}

Note that there are 20 pixels additional space appear on the right side.

Modify width of wordpress website

Prepare a new banner, with file name path.jpg, and 960 pixels in width, so that it will fill up both side. Upload to the theme header directory to replace the original banner image, for example:

home/wp-content/themes/twentyten/images/headers

Here's the result:

Modify width of wordpress website

Refresh browser to see the changes. The new banner shows up.

However there are still 20 pixels space on the right side of the banner. In other words, the width of banner was automatically re-sized to 940 pixels.

Modify width of wordpress website

Don't worry! Let’s see how to correct this problem so that the width of banner will be kept at 960 pixels, and will not be re-sized to 940 pixels.

Open the function.php file and navigate to line 116:

Modify width of wordpress website

Ah… The width of the Header banner is defined here. That’s why the width of banner is re-sized to 940 pixels automatically. Let’s change HEADER_IMAGE_WIDTH to 960, as shown below:

define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘twentyten_header_image_width’, 960 ) );

Refresh browser to see the changes again. Ha ha... The banner is now displaying it’s original size, i.e. 960 pixels.

Modify width of wordpress website

Width of Navigation Menu

However the width of top navigation menu is still 940 pixels. Let’s see how to change it to the same width of banner, i.e. 960 pixels.

Take a look at the WordPress header.php file again. The top navigation menu is holding in the access div layer. Therefore the width of the navigation menu should be set in the #access selector.

Modify width of wordpress website

Open the stylesheet and navigate to the #access selector. Yes, the width of the #access div layer is set here.

Modify width of wordpress website

Change the width of #access to 960 pixels:

#access {
    background: #000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 960px;
}

Refresh browser to see the changes. The width of the WordPress top navigation menu is same as the banner now:

Modify width of wordpress website

As you can see, this should not be too difficult to customize a WordPress theme.