Make a custom blog page in Drupal

In this tutorial i'll explain how to make a custom overview page and a blog article page in Drupal. The reason why i decided to make this tutorials, was because a lot of people don't understand how the Drupals blog module pages work. They find a solution with the Views module, but that isn't necassery. It's quite simple, so you don't need a lot of programming skills.

Ok let's start and make are own custom blog page.

First step

How does it all work

Second step

Customizing your drupal blog page

1. Copy your node.tpl.php and rename it to node-blog.tpl.php.

2. Place the divs and html tags to achief your layout

3. Place the php code, to load all the data (example code below)

• Replace "NAME_IMAGE" with your info
• Replace "DOMAIN_NAME" with your info

 Copy & past the code in node-blog.tpl.php:

<!-- start: BLOG IMAGE -->
<div id="blog-image"> // Blog article image

	<?php if($node->field_"NAME_IMAGE"[0][filepath]){ ?>
        <div id="image"><?php print theme('imagecache', 'blog_image', $node->field_"NAME_IMAGE">[0][filepath]); ?></div>
    <?php }?>

</div>
<!-- end: BLOG IMAGE --> 
<!-- start: BLOG TEXT -->
<div id="blog-text">
     <a href="http://www."DOMAIN_NAME".com/<?php print $node->path ?>"><h1><?php print $node->title ?></h1></a>
    <div id="blog-body"><?php print $node->body; ?></div>
    
        <!-- start: BLOG TEASER/PAGE TEXT -->
	<?php if($node->teaser){ ?> // Check if the teaser must display (in page-blog.tpl.php)
        <div id="blog-teaser">
            <?php print $node->teaser; ?>
            <div class="blog-link">
                <a href="http://www."DOMAIN_NAME".com/<?php print $node->path ?>">Read article</a>
            </div>
        </div>
        <?php } ?>
        <!-- end: BLOG TEASER/PAGE TEXT -->    
</div>
    
<div class="clear"></div>
<!-- end: BLOG TEXT -->
    
<div class="clear"></div>

I used the Imagecache module for my blog image, i kept the code in the example above.

Third step

Make the overview page of your Drupal blog

1. Copy your page.tpl.php and rename it to page-blog.tpl.php.

2. Make your own category menu for your blog in the page-blog.tpl.php template (hardcoded or loaded from taxonomy data)

    Tip! . You can use taxonomy to create categories, click here to view a video tutorial about taxonomy.

Fourth step

Make your blog pages look good with CSS

1. Give it the right design with css (example code below)

Copy & past the follow css code in blog_stylesheet.css:

/* BLOG IMAGE STYLESHEET */

#blog-image {
	width: 270px;
	margin: 30px 20px 0 20px;
	float: left;
}

#blog-image img {
	border: 10px solid #212121;
}
	#blog-body img	{
		border: 10px solid #212121;
	}

/* BLOG TEXT STYLESHEET */

#blog-text {
	width: 640px;
	margin: 30px 20px 0 20px;
	float: left;
}
	#blog-text h1 {
		color: #09F;
		margin: 0 0 20px;
	}
	#blog-body,
	#blog-teaser {
		padding: 20px 0;
	}
.blog-link a {
	background: #900;
	display: block;
	width: 80px;
	padding: 3px;
	margin: 20px 0;
}
.clear {
	clear: both;
}

Good luck with making you´re own blog page, i hope this tutorial got you started!

Follow me on twitter or rssfeed for more tutorials and articles.