Anatomy of a home page: WordPress.com

Anatomy of a home page: WordPress.com

Many people have big dreams when planning their WPMU-based site, and want to be the next WordPress.com. I see a lot of requests for how to make a home page like theirs, but I don't think you should copy anyone's site outright. You can, however, be inspired by them. A lot of successful wordpressmu-based sites have common features on their homepage, and today I hope to go over the one we all know best.

Let's look at a recent screenshot of WordPress.com's home page and see the elements included. I'll follow-up with an explanation of where the find the various plugins and tools to achieve the same functionality (where possible).

Most themes for WPMU-based sites start with a regular WordPress theme using the home.php file with custom code to display features and links to pull the visitor further into the site.

1. The first thing you might notice is the big huge signup button. I guess they want us to signup! Note how the background color of the container is slightly darker (a pale yellow) than the rest of the screen. The button is also quite large. These two details emphasize what they most want you to do. This is just a simple graphic leading to the signup page. There's also a link to a page with features. This is just a simple Page created in the backend and linked in the home.php file.

Starting from the top of the page and moving left to right, this is the natural flow for English readers.
2. The site logo. You need to let people know your site name and your logo is needed for branding. This clicks back to the home page, even when we are on it. It's part of the header.php file, so you will want this on all pages on the main blog.

3. Navigation tabs in a horizontal menu. These lead to Pages created in the backend of the main blog. You'll need these to convince people to sign up. They'll have questions or things they'd like to know, and Pages are a place to put relatively static information. There's also a link to the main blog area. Since using the home.php file structure knocks out a proper landing page for a blog area, it's not too much work to make a special page template, call it "blog" and pull in the main blog's most recent posts. You can hardcode specific links in there, list all pages, or even exclude some pages.

4. A search bar. Note how the text inside states it just searches the main blog. This is just standard theme code you'll find anywhere.

5. There's a nice and impressive line of sitewide stats here. WPMU has a built-in function that grabs most of this. Just insert this wherever you want to show yours:
<?php
$stats = get_sitestats();
print "<h2>Site Stats</h2>
There are currently ".$stats[ 'blogs' ]." blogs running on this server and ".$stats[ 'users' ]." users "; ?>
.

Wordcount is coming soon.

6. Drop-down box to select your language of choice. I haven't figured out multi-lingual capabilities yet. 🙂 If you have tips, leave 'em in the comments.

7. Login box. This is actually pretty easy if you grab a small plugin here.Otherwise, you can drop in any login box and just do a redirect to the member's blog.

8. This list shows the recent posts from the main blog only. It's just a mini-loop.

9. The self-proclaimed "hawt" post. Also known as a Featured post. There's a few ways to do this, and it depends on the criteria you use. You could use this featured user widget, or this plugin that features a recent post from a random array of blogs.

10. Hot VIP posts - on this setup, they have a series of VIP blogs. One way this could be done is to create a feed mashup via something like Yahoo Pipes and then parse the feed for display.

11. Community posts - this is just the most recent posts across the system. Tons of plugin for this, I like this one: AHP Sitewide recent posts.

12. Sitewide tag cloud. there's two wonderful plugins to use here. Mr Henry's sitewide tags* and Donncha's sitewide tags. I find Mr Brian's version easier to implement if you want a smaller tag cloud on the main page. Donncha's is better if you want the tags off the main page and on their own. * note the download page has a link to the unstable version. I have an older copy I use.

13. Ad or featured plugin. You could leave something like this out unless you had a product to feature.

14.Sub-navigation - these can be the same as the nav bar up top, or they can be more. Use the pages function call or hardcode the links manually if they aren't going to change. Note they include important information like TOS, FAQs, Privacy policies and more.

15. Extra links.

16. Corporate information - a link to the main company's website. You could also link to a development firm too.

If I missed anything let me know, because I'm tired. 🙂

41 Comments
  • IdaWebCo
    Posted at 15:50h, 06 December Reply

    Excellent post and very timely for me. Thanks for the great tour.

  • Dreamcolor
    Posted at 06:42h, 07 December Reply

    About ‘Drop-down box to select your language of choice’, I have some guess.

    Maybe we can do like this:

    1. Sign in some new blogs. Fiil in like ‘fr’, ‘it’, ‘zh-cn’. And URLs of them will ‘fr.domain.tld’, ‘it.domain.tld’, ‘zh-cn.domain.tld’……

    2.Make a list with HTML, and fill these subdomain like wordpress.com/

    3.Set every new blog’s language same as them subdomain.

    4.Set every blog to use the same theme. For example, all sub blog to use ‘home’. And make sure this theme can translated by Gettext.

    Now, when you select diffrent language form the list. It can visit diffrent sub blog like wordpress.com with diff languages.

    There was another problem. That is how to pick up special tags and posts list for different sub site? Use special SQL words to filter from MU’s database?

    Hope you can what I said. Haha ……

  • peter
    Posted at 10:22h, 08 December Reply

    thank you for the good tips
    very nice,this site is my favorite.

  • Kim Woodbridge
    Posted at 17:40h, 08 December Reply

    Hi – I’m so glad you commented today because now I’ve found this awesome site. I’ve been wanting to learn more about MU and now have a place to find tutorials.

    And I really like the way you’ve broken down the website into it’s basic components. People don’t need to copy – just make sure you have the basics.

  • Antonia@Beauty tips
    Posted at 06:39h, 09 December Reply

    Nice! Finally, a site that can help even the average ‘wordpress-challenged’ person like me actually understand what each section on a blog is for! I appreciate the numbering of various sections of the page – helped me to browse only the sections that I wanted to read!

    I did try using the multilingual capabilities offered by a famous blog hosting site – but it ended up doing weird things to my post so I quit and now stick to posting in English only.

  • klima servisi
    Posted at 05:17h, 12 December Reply

    very best post thank you

  • estetik
    Posted at 05:18h, 12 December Reply

    very nice post

  • estetik
    Posted at 05:20h, 12 December Reply

    is the very best post

  • saç ekimi
    Posted at 05:21h, 12 December Reply

    best finally thanks

  • burun estetiği
    Posted at 05:23h, 12 December Reply

    Excellent post and very timely for me. hmm 🙂

  • göğüs estetiği
    Posted at 05:25h, 12 December Reply

    estetik ve estetik operasyonlar arasında göğüs estetiği bayanların en sık yaptırdığı esatetik operasyonların başında geliyor

  • Lhurey
    Posted at 00:46h, 14 December Reply

    the fancy login is not accessible

  • rat rods for sale
    Posted at 13:42h, 14 December Reply

    Ohhh, i needed this info! Thanks for posting

  • site rush
    Posted at 15:16h, 16 December Reply

    You definitely nailed all the key points to the blog. Nice post.

  • Kiraly Zoltán
    Posted at 11:24h, 17 December Reply

    awesome post thx 🙂

  • tats march
    Posted at 10:44h, 31 December Reply

    it is a great post and i read it just in time as i needed the information about word press at this time that’s why i am thankful to you and it give me a great information.

  • Rmatt
    Posted at 08:50h, 05 January Reply

    Nice post !
    What about a tour into the planet.wordpress.org ?

    I think it will very helpful for many people to have a look inside, to understand how they managed to aggregate all these blogs.

  • web 2.0 designer
    Posted at 09:24h, 05 January Reply

    this could’nt come at a better time..
    thanks for posting this dude

    cheers

  • Jon
    Posted at 12:54h, 05 January Reply

    Regarding having a login form on the home page, the fancy login is not a plugin but merely a zipped text file containing instructions. The instructions require downloading of a PHP script from here http://trac.mu.wordpress.org/wiki/FancyLogin and that link does not work.

  • Игры
    Posted at 20:11h, 06 January Reply

    multi-lingual capabilities – it is great, in fact, a very good opportunity. What is it you do not like?

  • Remkus
    Posted at 09:49h, 07 January Reply

    Excellent post. It’s always nice to see someone take the time to translate their knowledge via examples and images. Thanks!

  • Patrick
    Posted at 00:44h, 20 January Reply

    how about a sitewide comments thing?
    http://mu.wordpress.org/forums/topic.php?id=10813

  • udyr.com » Blog Archive » links for 2009-01-20
    Posted at 11:51h, 07 February Reply

    […] WPMU Tutorials » Anatomy of a home page: WordPress.com […]

  • Robert
    Posted at 19:47h, 21 February Reply

    I just found this site. Awesome !!

    Now I can create a blog portal with this information. Many thanks.

  • estetik
    Posted at 08:42h, 07 April Reply

    multi-lingual capabilities – it is great, in fact, a very good opportunity. What is it you do not like?

  • Jake Spurlock
    Posted at 10:29h, 28 April Reply

    I am not able to get the stats code to work… Any ideas there? Has it deprecated?

  • saç ekimi
    Posted at 05:30h, 16 May Reply

    this could’nt come at a better time..
    thanks for posting this dude

  • Chris
    Posted at 00:17h, 29 May Reply

    Thanks for the post, with your help I was able to quickly put a home page theme together. It’s not exactly how I want it to look yet but I’m making progress.

    In the meantime, I’d like to encourage all of the readers to have a look at my site and sign up. Try it out.

    http://readyblog.org

  • PAtrick
    Posted at 20:18h, 29 May Reply

    “wordcount is comin soon”

    when is it coming?

  • ougogo
    Posted at 16:20h, 05 June Reply

    Hello all, I’m fench and I couldn’t acces to this website :
    http://trac.mu.wordpress.org/wiki/FancyLogin

    Why? HAve you a solution?

    Cdlt,

    Hugo
    [rq=,,][/rq]

  • Ron
    Posted at 14:48h, 06 June Reply
  • ougogo
    Posted at 14:35h, 09 June Reply

    +24h, Up?

    it’s important for my project, please.

    Bests regards,

    Hugo
    [rq=,,][/rq]

  • ougogo
    Posted at 14:53h, 09 June Reply

    Sorry for double post, but my precednt post is not complet.

    I’m a little newbi in the matter, I’m french, and I don’t understand the approach for downloading Fancy Login Script

    Bests regards,

    Hugo
    [rq=,,][/rq]

  • ougogo
    Posted at 09:58h, 13 June Reply

    Please, help me, it’s very important for me.

  • Fianno
    Posted at 11:54h, 21 July Reply

    Really helpful posts! Thanks!
    For everyone who posted about not being able to get the fancy login.
    Look in the middle of the page and you’ll see something along the lines of download in other formats.

  • Home Alarms Salt Lake
    Posted at 20:18h, 28 July Reply

    The AHP Sitewide feature is a good one. Thanks.

  • Mengembalikan Jati Diri Bangsa
    Posted at 05:51h, 02 September Reply

    whoa.. very informative here..
    how about wp 2.8.4? the new one?

  • Sebastian's Blog » Blog Archive » Wordpress µ – share your knowledge
    Posted at 07:05h, 06 October Reply

    […] Anatomy of a home page: WordPress.com […]

  • links for 2009-11-17
    Posted at 04:03h, 18 November Reply

    […] Anatomy of a home page: WordPress.com – WPMU Tutorials (tags: tutorial wordpress wpmu) […]

  • dora hospital
    Posted at 15:10h, 07 December Reply

    thank you very much

  • Sagive
    Posted at 06:44h, 21 May Reply

    Thanks a bunch, took that stat’s line
    into my New MU blog

Post A Comment