The BLOG Category
If you’ve read the documentation, you’ll know this already: if you have a “Blog” Category, all posts in that category will be displayed in a really funky way like in the Mansion Demo. For this to work your category slug needs to be “blog” – its title can be anything you like (say “Chicken Wings” for arguments sake).
You’ll notice that each post is displayed with a title, a date and an excerpt of your post. You may not know this but you can set this excerpt yourself for each post (check underneath your WordPress Post window – there’s a section called Excerpt). If you leave this blank, Mansion will “fake” this value and will output the first 30 words of your post.
Maybe you’ll notice some black gaps between the columns. You can make your posts as wide or as narrow as you like – courtesy of a couple of values in your style.css file:
#nav .current-cat a, #nav .current_page_item a {color: #888;}
.box { padding: 0px; margin: 0 0 1px 1px;float: left }
.col1 {width:200px}
.col2 {width:401px}
See those two width values? They’re responsible for positioning each column. The first for ordinairy posts, the second is for “featured” posts. Play with those values and see what works best for you. Note that the second value should be twice as wide as the first value plus 1 pixel.
I recommend using values in multiples of your thumbnail width for best results.
Using BLOG style for your front page
Ivan was asking if it’s possible to display the front page content like the blog category by default. What a cool idea indeed – this is possible by tweaking a couple of things.
First, copy the entire contents of category-blog.php into the index.php file.
Next have a look at the style.css file and find the block that begins with /* Blog */. Notice that every style tag begins with .category-blog? That’s what makes this styling load only when we’re displaying out blog category. We want this to be executed by default so we need to get rid of .category-blog on every line like so:
/* Blog */
.box, .page-template-page-blog-php .box {background: #222;padding-bottom: 4px;}
.blog a, .page-template-page-blog-php .blog a {text-decoration: none; font-weight: normal;}
.box h2.posttitle, .page-template-page-blog-php .box h2.posttitle {padding:10px;font-size: 15px; font-weight: bold; padding-bottom: 0; margin-bottom: 0;}
.box p, .page-template-page-blog-php .box p {padding:5px 10px 10px;font-size: 12px; line-height: 16px;}
.col2 h2.posttitle, .page-template-page-blog-php .col2 h2.posttitle {font-family: Georgia, Times; font-size: 20px; font-style: italic; font-weight: normal;padding-top: 15px;}
.col2 p, .page-template-page-blog-php .col2 p {font-family: Georgia, Times; font-size: 16px; font-style: italic; line-height: 20px;padding-top: 10px;}
.datediv, .page-template-page-blog-php .datediv {font-family: arial;margin: 10px 10px 0; float: right; color: #666; border-bottom: 2px solid #333;}
span.day, .page-template-page-blog-php span.day {font-size: 30px; text-decoration: none;font-weight: bold;display: block; padding: 3px 0;}
span.monthyear, .page-template-page-blog-php span.monthyear {font-size: 10px; text-transform: uppercase;}
Styling sorted. Now we have our frontpage looking exactly like the “blog” page with all posts being formatted “the way of the blog”.
Bigger BLOG Headlines
Fancy some slightly bigger headlines in the blog display? Have a look at style.css again under this section:
/* Blog */
.category-blog .box {background: #222;padding-bottom: 4px}
.category-blog .blog a {text-decoration: none; font-weight: normal}
.category-blog .box h2.posttitle {padding:10px;font-size: 20px; font-weight: bold; padding-bottom: 0; margin-bottom: 0}
.category-blog .box p {padding:5px 10px 10px;font-size: 12px; line-height: 16px}
.category-blog .col2 h2.posttitle {font-family: Georgia, Times; font-size: 15px; font-style: italic; font-weight: normal;padding-top: 15px}
.category-blog .col2 p {font-family: Georgia, Times; font-size: 16px; font-style: italic; line-height: 20px;padding-top: 10px}
.category-blog .datediv {font-family: arial;margin: 10px 10px 0; float: right; color: #666; border-bottom: 2px solid #333;}
.category-blog span.day {font-size: 30px; text-decoration: none;font-weight: bold;display: block}
.category-blog span.monthyear {font-size: 10px; text-transform: uppercase}
You can pretty much style every element of those post excerpts and headlines here. The one for the headline is the “.category-blog .box h2.posttitle” tag (make it 20 instead of 15px for example).
How to change the default image
Notice the dark grey image of a structure that gets displayed when you haven’t got an image in one of your posts?
As nice as it is, it may not be what you’re looking for. Fret not, you can easily replace that. There’s a small JPG image located in
wp-content/themes/mansion/images/default-thumb.jpg
Change that to your heart’s desire. Keep in mind that for best results this should have the same dimensions as all your other thumbnails (naturally).
As always, enjoy 
{ 210 comments… read them below or add one }
← Previous Comments
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.
Pass I’m afraid. Maybe the developers over at the Graph Paper Press forums have a solution for you: http://graphpaperpress.com
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?
I want to put all my thumbnails onto one scrollable page. How do I do that?
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.
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?
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
Thanks.
how do i change the number of images that are displayed in the grid at the home page? somehow it only shows 10. thanks, d
Hi Diego,
You can set that in WordPress under Settings – Reading (blog pages show at most xx posts).
great!!! thank so much jay!!! spent looong hours looking for it! many many thanks & all the best, d
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…
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.
← Previous Comments
{ 1 trackback }