by andrea

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. 🙂

Comments

  1. IdaWebCo

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

  2. 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 ……

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

  4. 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.

  5. 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.

  6. very best post thank you

  7. very nice post

  8. is the very best post

  9. best finally thanks

  10. Excellent post and very timely for me. hmm 🙂

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

  12. the fancy login is not accessible

  13. Ohhh, i needed this info! Thanks for posting

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

  15. awesome post thx 🙂

  16. tats march

    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.

  17. 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.

  18. web 2.0 designer

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

    cheers

  19. Jon

    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.

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

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

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

  23. Robert

    I just found this site. Awesome !!

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

  24. estetik

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

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

  26. saç ekimi

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

  27. 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

  28. “wordcount is comin soon”

    when is it coming?

  29. ougogo

    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]

  30. ougogo

    +24h, Up?

    it’s important for my project, please.

    Bests regards,

    Hugo
    [rq=,,][/rq]

  31. 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]

  32. ougogo

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

  33. 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.

  34. Home Alarms Salt Lake

    The AHP Sitewide feature is a good one. Thanks.

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

  36. dora hospital

    thank you very much

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

Leave a Reply

Your email address will not be published / Required fields are marked *