WordPress Frontpage - How to Style Your Blog Frontpage
73Your WordPress blog front-page is very important because it is likely the first thing that most of your visitors will see. If visitors come to you from searching one of your other pages, your blog front-page is frequently where they will go to first.
Therefore, it makes sense to spend the time to craft a visually compelling blog frontpage.
There are two types of front-page you can define for your WordPress blog -
1. A dynamic front-page
This is the WordPress default.
It shows a certain number of posts from your WordPress blog. You can set the number of posts shown by going to Settings >> Reading and changing the number on the 'Blog pages show at most' option.
2. A 'static' front-page
This option lets you set your WordPress front-page to a self-defined blog page. It is only 'static' in that you have set it to a pre-defined page, but the page itself is dynamically generated (as with all your other WordPress pages and posts) and can contain dynamic content.
The advantage of using this 'static' front-page option is that you can easily style your page and its contents using WordPress page templates.
Dynamic Front Page
If you choose this option, the look of your blog frontpage will be highly dependent on your theme of choice.
There are two main options here -
- Show the full text of your recent posts.
- Show only a teaser or excerpt of your recent posts.
In general, it is a better idea to just show a post teaser or excerpt.
In this way, your visitors get a quick scan of your latest post titles as well as a synopsis. This increases the possibility that they will see something that they like, and click through to the article.
On the other hand, if you show the full text of your posts, your readers will realistically only be exposed to the first one or two posts. If it does not interest them, they will likely move on to something else.
Make sure to pick a compelling WordPress theme that has nicely styled post excerpts. You also want to include post images which will make your WordPress front-page more visually arresting to your readers.
Here is a simple step by step tutorial on how to insert and style your own WordPress post excerpts. Check it out, it is not as difficult as you think.
Static Front Page
Some WordPress blogs are not used as blogs at all, but rather as content management systems (CMS). Such blogs do not have regular blog postings, but are built to look more like a static website, e.g. a corporate website.
To make your blog use a static webpage rather than the default recent posts page, go into Settings >> Reading. At the very top of the screen, you can choose whether your front-page displays your latest posts or a static page. Just click on the static page option.
You will then need to choose a front-page as well as a posts page.
The posts page is just an empty page. It is used as a placeholder for your list of recent posts. To create a posts page, make and save an empty page with an appropriate title, e.g. My WordPress Posts. Then, assign that page as your posts page on the Settings >> Reading screen.
Now, you can carefully craft your WordPress front-page.
Crafting a WordPress Front-Page
To flexibly design a WordPress front-page, you want to utilize the WordPress page templates functionality.
WordPress page templates allow you to create a template file that contains the design structure of your front-page. This template file is a PHP file, and within it, you can insert HTML, Javascript, and PHP. You can also make WordPress function calls as well as utilize design elements from your WordPress theme.
For visual consistency, you want to mostly use your existing theme styles, and only create new styles for elements that are not supported by the theme.
Creating a compelling static front page will require HTML and CSS knowledge, as well as some PHP knowledge. You will also need a good understanding of how your current theme areas are organized.
Here is an example page template for my Shiba WordPress theme front-page.
<?php
/*
Template Name: HomePage
*/
define('EXCLUDE_SIDEBARS', TRUE);
define('EXCLUDE_HEADER', TRUE);
// Changing excerpt length
function new_excerpt_length($length) {
return 30;
}
add_filter('excerpt_length', 'new_excerpt_length');
if (have_posts()) :
the_post();
get_header();
?>
<!-- Include HTML page content here -->
</div> <!-- End main: Important! Closes main div opened in header -->
<div class="sidemenu" style="float:right;">
<!-- Include ads and right sidebar elements here -->
<a href="http://shibashake.com/wordpress-theme/feed">
<div class="subscribe-rss"></div></a>
</div>
<?php
else:
get_header();
?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php
endif;
get_footer();
?>
WordPress Tutorials
|
WordPress 2.7 Complete
Price: $31.57
List Price: $39.99 |
|
WordPress Theme Design: A complete guide to creating professional WordPress themes
Price: $28.00
List Price: $39.99 |
|
WordPress For Dummies (For Dummies (Computer/Tech))
Price: $13.90
List Price: $24.99 |
|
Building a WordPress Blog People Want to Read
Price: $15.78
List Price: $29.99 |
|
A Step by Step Wordpress Tutorial For Beginners
Price: $17.94
List Price: $19.95 |
Where Do I Start?
WordPress design is not as difficult as you would think.
I started learning WordPress at the end of July 2009, and after about three months, I have been able to significantly enhance the look and feel of my blogs. This has resulted in a 70% traffic increase, and also a nice increase in Google AdSense earnings on my home website.
Part of the increase is due to the move of about 20 articles from HubPages to my own website, as well as to some new content. However, a big part of the traffic increase, I believe, is from a better designed blog, that is more visually compelling, and easier to navigate.
I started my WordPress journey by first learning about CSS. I downloaded some webpage designs that I really liked, and transferred my favorite CSS styles onto my own site. I also learned about doing layouts with CSS containers. This took the most time to learn, but it was time very well spent.
Once I felt comfortable with CSS, I moved on to learning about PHP and WordPress. I already have some programming knowledge, so learning PHP probably took less time than if I were just starting out, with no programming experience.
The best way, I found, to learn about PHP and WordPress is by looking at the simple WordPress Classic theme and altering it to suit my own purposes. I built my own WordPress theme by altering the Classic WordPress theme, and in that process, I learned a lot about PHP, as well as about the WordPress codex.
Take it in small steps.
By doing small tasks, you will quickly find that it gets easier and easier to do what you want.
WordPress is a large system, therefore do not expect to learn it all in one sitting. I am still learning it - one step at a time.
Do you host your own blog?
See results without voting
WordPress Blog
- Popeye Gallery Plugin
Images and image galleries are a very important part of any WordPress blog. I have been looking for a good inline Lightbox type gallery display for my WordPress blog, and really liked the... - 2 days ago
- Expand the WordPress Media Library Admin Panel
As of WordPress 2.8, it appears that the only way to insert new interface panels into the WordPress Media Library is through the ‘restrict_manage_posts‘ action hook. Below I describe how... - 5 days ago
- WordPress Media Library Plugin
This plugin tries to simplify some of the image attachment functions in the existing WordPress Media Library. There are several key limitations in the current WordPress (2.8) Media Library including... - 6 days ago
PrintShare it! — Rate it: up down flag this hub
Comments
Too much for me to handle
Hey dohn - good to see ya! Good luck and let me know if have any questions. I am in the process of making my sites compatible to IE6 - it is a big pain in the ass!
Hey CC - try it out, it is not as complex as it may seem. Also a lot of fun. :)
WordPress in the News
- Diana Picasso Opens Sofia Modern Arts ExhibitionNovinite.com29 hours ago
Diana Picasso, grand-daughter of the artist Pablo Picasso, opened a new art gallery in downtown Sofia. Photo by wordpress.org Diana, the grand-daughter of world-famous artist Pablo Picasso, arrived in Bulgaria’s capital, Sofia, for the opening of the Museum Gallery of Modern Art.
- WordPress.com Implements the Twitter APISlashdot5 days ago
This morning Matt Mullenweg announced on his blog that WordPress.com has enabled posting and reading blogs via the Twitter API. Now any Twitter app that supports a custom API URL (Tweetie is one such) can be used to either post updates to a WordPress.com blog, or to read updates from blogs to which one has subscribed. Dave Winer calls the move by Automattic, WordPress.com's parent company ...
- Google, Twitter, WordPress & Facebook: Publish/Subscribe Matrix Could Explode Into Glass-Smooth PlatformReadWriteWeb3 days ago
A storm of news points to a future of frictionless publishing and subscription, across platforms. Google just announced that its FeedBurner RSS publishing service now supports automatic publishing to a Twitter account. If you're among the many people who use the service Twitterfeed (like CNN, the WhiteHouse, ReadWriteWeb, etc.) then you may very well find that startup expendable starting now ...
dohn121 says:
2 months ago
Funny, I just got my Wordpress Blog about 3 weeks ago but haven't worked on it. It's a good thing I bookmarked everything you wrote on it, Shibashake! I'm now going to utilize it. Wish me luck, my friend! (I'm bookmarking this one too, of course!)