06 Dec 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:
$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. 🙂