How to modify MANSION by GraphPaper Press

- by

Fixing Archives

There’s one last tweak we need to make in archives.php in order for your new portrait thumbnails to show up correctly in your Archives. Have a look at the file and find this bit of code:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/images/default-thumb.jpg" alt="<?php the_title(); ?>" width="200" height="150" /></a>

Change the two values to your width/height combo and your Archives will look just as good as your front page.

Remove or Re-order Items in the Nav Box

If you don’t like certain item in the Nav Box, let’s do something about that! The magic is all down to a small file called nav.php – here’s the default code:

<ul id="nav">
<li><a href="<?php bloginfo('home'); ?>">Home</a></li>
<?php wp_list_categories('title_li='); ?>
<?php wp_list_pages('title_li='); ?>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>
<li><?php if(function_exists('get_search_form')) : ?>
<?php get_search_form(); ?>
<?php else : ?>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>

I’ll go through these one by one and explain what these lines of code do. If you’d like to get rid of one, just delete it or comment it out by putting <!-- in the front and --> at the back. You can also swap them around, say if you wanted your pages displayed before your categories.

  • Line 2 displays the HOME link.
  • Line 3 displays all your CATEGORIES
  • Line 4 displays all your PAGES and SUB-PAGES
  • Line 5 displays the RSS FEED link
  • Lines 6 to 11 generate the SEARCH box

Add a Logo to your Nav Box

If you’d like to add a logo or image above items in your nav box, have a look at the nav.php file and place these lines

above everything else in that file like this:

<a href=”<?php bloginfo(‘home’); ?>”>
 <img src=””>

The first and third line make this image clickable and link to your home page. Make sure your image is only as wide as your nav bar – otherwise it’ll throw the image grid out of alignment.

Single Posts and Pages with BIGGER pictures

Ah yes… this is a tad tricky but absolutely doable. We need to change two values which will have an influence on each other. First we need to decide how wide each of our pictures can be (the height will be determined automatically). Then we need to amend the “container” width, which will determine the width of our entire site.

First things first: maximum picture width. Mansion’s default width is 495px – say you wanted to make this slightly wider with 550px. Find the following code in style.css:

/* Single Post Page */
#content {padding: 40px 30px 30px 30px; width: 495px; float:left;}

Tweak the width value to 550px and see what you get. Notice that the right hand side of your picture is now cut off. To make it appear in all its glory we need to widen the “container” to make it fit again. Find this piece of code towards the end of the file:

/* Sidebar */
.single #container, .page #container, .single #footer, .page #footer {width: 960px;overflow: hidden}

Logic dictates that if we added 55 pixels to our picture width, maybe we’ll do the same to the container and see what happens (it’s 1015px if you haven’t got a calculator).

If you’ve previously uploaded a number of pictures and your image size was set to something higher than 550px, you can easily re-size images on the fly by adding this piece of code (somewhere under Single Post Page to keep’em together):

#content p img {width: 550px; height: auto}

One downside to putting in a general tag like this is that EVERY picture in your post will now be resized to 550px width – which includes your smileys. To fix that, pop in this piece of code afterwards:

#content p img.wp-smiley {width: 15px; height: 15px}


Make sure your large picture size (under Settings – Media) is set to this value or above – otherwise you end up with smaller pictures that are up-rezzed by your browser. Larger sizes will be down-rezzed, which is fine – but keep in mind loading times here. You don’t want pictures of 4000x3000px to be loaded when all you’re doing is display them at 600x400px…

Keep your viewers in mind when you tweak this though. On your 42″ monitor a 4000px wide picture may look incredible, but if your target audience only has a net book they may think differently. I’d recommend to leave the maximum container width below 1100px – this will look fine on any resolution above 1200×800.

Featured Posts

You can use Featured Posts, which will display a tuhmbnail 4 times the size of your other sizes. All you need to do is tag your post with “featured” and Mansion will do the rest.

If you’ve changed your thumbnail sizes as described earlier, you also need to make a slight amendment to the functions.php file in order for this to work properly. The first piece of code is towards the top:

// Add Post Thumbnail Theme Support
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'featured', 401, 301, true );

Notice the bottom line which has the values 401 and 301. By default, that’s your thumbnail width x height plus one pixel each to create a tiny space between them. You need to amend this with your chosen thumbnail values. In my case that would be 301 and 401.

We need to do the same thing further down the same file where you should find the following code. Again replace the values 401 and 301 with the your own ones:

//get thumbnails
function postimages($size=medium) {
if ( $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'post_mime_type' => 'image')))
foreach( $images as $image ) {
if($size=='featured') {
$attachmentimage=wp_get_attachment_image( $image->ID, array(401, 301) );
} else {
$attachmentimage=wp_get_attachment_image( $image->ID, $size );

If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site witout any pesky ads! More details here.

215 thoughts on “How to modify MANSION by GraphPaper Press”

  1. Hi there,

    I have just started using the mansion theme and for some unknown reason I can’t get the grid to show the featured image for that post – it just shows the default template image?

    Hope you can help, thanks

  2. I am having the same problem! I can’t get it to show my thumbnails, it only shows a template over and over. Any help from anyone??

  3. Basically, I started my site today and I am totally lost. First, every time I upload a pic, it just shows up on the main page as their default image (with the building and the fog). How do I get my thumbnails to show up there? Second, how can I edit the box with my site title so the box is bigger and the words aren’t put onto the next line? And finally, how do I edit it so there isn’t a huge gap between pics? I want little to no gap. I’ve read all the other responses to this question, but none have worked for me. Thanks!

  4. Hi Colton, Mansion isn’t the easiest theme to get going I must admit. Did you read the instructions, and did you set up the image sizes in the Media settings correctly? It’s explained here:

    To make images show up on the front page instead of the default image you have to set a “featured image” per post. Without it, only the default image shows up. If you set the images sizes for thumbnail correctly (under Settings – Media) then all your front page images will be the same size, and hence there won’t be any gaps between images. This works for new posts, but if you already have uploaded pictures you’d like to use without having to upload them again then you need to use the AJAX Thumbnail Rebuild plugin I mentioned. This will re-create all thumbnail images and resize them correctly. Sadly there is no way to change the text box and make it larger without destroying the rest of the layout.

    And finally, the developers have a support section on their site here:

Add your voice!

This site uses Akismet to reduce spam. Learn how your comment data is processed.