WordPress Front-Page - How to Style Your Blog Frontpage
86Your 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.
<?php
/*
Template Name: HomePage
*/
// 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 -->
<?php
else:
get_header();
?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php
endif;
get_footer();
?>
WordPress Tutorials
 | Amazon Price: $3.97 |
 | Amazon Price: $14.27 List Price: $24.99 |
 | Amazon Price: $12.48 List Price: $29.99 |
 | Amazon Price: $24.30 List Price: $44.99 |
 | Amazon Price: $19.99 |
Do you host your own blog?
See results without votingWhere 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.
Join HubPages and start earning money online.
CommentsLoading...
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. :)
New Year Greetings and very best wishes!
QS! So good to see you. Happy New Year to you. How are you? I haven't been on HP much so I am really out of touch with all the juicy stuff :)
Yeah I know, ShaniaInu's had a dozen pups and you have been appointed the baby sitter!
lol - Shania Inu is taking me running every day. I am tired - need a holiday!
Actually I am spending most of my time on WordPress and I also bought some new 3D software. Too many things to do - too little time :) What about you? What have you been up to? How is your dog pack?
Me? Well I could not manage to meet any of the deadlines I set for myself although most of them were set for the 24th of December ... sigh!
Dog pack? Mine? Haa! I know what you mean ... those dogs are slowly fading into insignificance, thank dog they are!
Say wooves (woofs) to your dogs for me and to you a big MEEEYOWWW for the year 2010!
Ngyeaw! Back at ya!
A bit tough for me to maintain WP
Yeah - I think the frequent updates is the biggest thing. The trick is finding plugins that are actively being supported.
Wow very helpful and just rated it up... Two thumbs hehehe, I am going to bookmark this and apply this in the days to come... There are always diamonds in the rough and sometimes they are tough to find thanks a lot for sharing shiba. Good day.
Thanks GH,
WordPress is definitely a whole lot of fun and very addictive. Hopefully, I will get a break soon and be able to write some articles at HubPages. If only there were more hours in a day eh? :)
Cool post. Very informative. I was searching for the static homepage thing on WP before I found it on their forum. It's a flexible feature and it's good that blogging platforms are providing that.
Cheers
Great info it really help me out. Thanks for sharing!
Hi shibashake and nice to meet U.
I would like to make more easy updating my Static Front Page.
So i use the BFA Atahualpa theme that permits users to add new widget aresa.
I add 4 column new widget areas in my Front page.
In this 4 columns i copy and paste part of posts/ articles that i believe could stay on the Front Page.
I would like to make this more easier using the_excerpt or something like that simple adding in every Front Page widget areas some a php code ( i have Exec PHP plug in) or i have to update something inside the_loop and
how to?
Regards
Carlo
Thanks
Hello Carlo,
I am not sure what you are asking. Are you trying to show excerpts from posts with particular IDs? If so, then just use the get_post command and then print the excerpt yourself ($post->post_excerpt).
Doesn't sound like you want to mess with the WordPress loop, but I don't know enough details about what you want to do to say for sure.
Hi Shiba.
yes for sure i want to do what you exactly wrote in your first sentence: show in my FP execerpt of specific posts.
Do you think you could try to wrote the whole php code to do that?
Thanks
Regards
Carlo
Hello Carlo,
It will be difficult to write the exact code, because different environments will have different requirements and different quirks. In its simplest form it will go something like this -
$my_post = get_post(10);
echo $my_post->post_excerpt;
Check out the get_post function on the WordPress Codex. There are more examples there, including a list of attributes for post objects. -
Hi Shiba,
at the end i solve:
I filled the Optional Excerpt field and i use following code:
$my_id = 10;
$post_id_10 = get_post($my_id);
echo $post_id_10->post_excerpt;
I' m very happy even i' m gonna to improve some details.
Many thanks for inspiration
Cheers
Carlo
Thanks Shiba, I also enjoy using Wordpress. Such a create way to make websites.
Thanks shibashake, one question. When setting up the frontpage at pages, I named it HOME. Now when having the static page HOME, wordpress writes on this page additionally HOME. I have it in the menu, HOME, and additionally wordpress writes on top HOME. In other words, how to have that frontpage empty? Thanks!
"In other words, how to have that frontpage empty? "
There are many ways to do this. The easiest is probably to do it using CSS. Find the container for the HOME text and then set the display to none. For example -
<style>
.storytitle { display:none; }
</style>
You could also just create an empty title, or create a template for the front page so that it does not print out the title.
dohn121 Level 2 Commenter 2 years 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!)