How to modify MANSION by GraphPaper Press

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:

<div>
<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>
</div>

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; ?>
</li>
</ul>

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:

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}

Happiness!

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 ) {
$attachmenturl=wp_get_attachment_url($image->ID);
if($size=='featured') {
$attachmentimage=wp_get_attachment_image( $image->ID, array(401, 301) );
} else {
$attachmentimage=wp_get_attachment_image( $image->ID, $size );
}

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

215 thoughts on “How to modify MANSION by GraphPaper Press

  1. Does anyone know how to change the header/logo box width without completely screwing up the thumbnail grid as well? Having a really tough time finding the variables to adjust the grid in relation to a modified header width (ideally I’d like the header twice as wide as the standard thumbs).

  2. What if I just want to make the pictures on the home page larger in the Mansion theme? For instance, to display only 3 across and 2 down (6 total). Right now the client feels that it’s too busy considering that it’s currently showing 24 photos. I know to remove the “featured images” to cut down on the amount of photos, but then how do I then increase the photo size so that those 6 photos take up more room. I’m thinking that it may even be a lot easier just to strip the code for that page and just use a standard table. I’d lose the mouseover effect, but it’s be easier to accomplish possibly.

  3. I’d like to install a rating post plugin on my Mansion theme based blog. I already tried to install some but none of them work, so I deactivated them. Can anyone suggest a rating post plugin that works on Mansion, please?

    1. Head over to Settings – Reading and set the amount of displayed posts to 30 or more. This will display more thumbnails on your front page. Note that there is a natural limit in the amount of posts WordPress is willing to display – so if you set this value to 100 you’ll see a maximum of something like 30.

      1. Thanks!

        I’m also trying to use the ‘featured’ tag. I’ve managed to adjust the size of thumbnails on some pages but not the main page. What do I have to do to get the ‘featured’ tag to work on the main page?

        1. Hi Joshua,

          the featured tag works out of the box, as long as a post is tagged with “featured”. This does however mean that only your latest “featured” post will show up with a large image. If you wrote another post which is not featured, then the featured post will be moved one slot down and display with a standard thumbnail on the home page.

          If you’d like to avoid this, then you can also make your featured post “sticky”, which means it will always be shown in the first position.

          Hope it helps – and I hope this makes sense 😉

  4. Hey Jay,
    I wanted to ask if there is a way in whicha post that i wrote will not appear on the home page? I want to associate it to other page…

    1. Hi Etti,

      There are a couple of plugins which can exclude posts from the front page. One is called “Simply Exclude” and another is called “Advanced Category Excluder”. You can get them on the WordPress Plugins Repository.

  5. 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

    1. 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??

  6. 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!

    1. 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: http://graphpaperpress.com/support/instructions/?theme=mansion

      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: http://graphpaperpress.com/support/

Add your voice!