The Essential Guide to Launching a Killer WordPress Site: Part 2 – Design and Functionality
Welcome to part two of our two-part guide to launching a WordPress site. As you might recall, we looked at site structure yesterday. So today, we’ll explore how to make that site of yours pretty (and perform well, too).
Building a house was the analogy used in part one, so we’re going to stick with that today. Previously, you learned how to lay the foundation of your site, i.e. pick a web host. You also learned how to frame it, or install WordPress. You were even given a run through of how to put up some walls, or pick and install a theme.
Where does that leave us? With working on the look and feel of your site, of course. I’m talking about aesthetics and function. But there’s more to this process than just slapping on a coat of paint. We left off with putting up the walls of your home—that’s installing a theme—so we’ll start off there with some tips for making the exterior of your “home” shine.
This is Part 2 of a two-part series on launching a WordPress site. In Part 1 we covered site structure.
- The Essential Guide to Launching a Killer WordPress Site: Part 1 – Structure
- The Essential Guide to Launching a Killer WordPress Site: Part 2 – Design and Functionality
With the structure of our home in place (thanks to yesterday’s post), it’s time to start adding some things to make it look good. That means thinking about those finishing touches that add curb appeal. Think good exterior paint, trim, and shutters. Maybe even some nice planters and shrubs. Hey, you could even consider some solar panels.
As it pertains to your website, the exterior decor refers to what a site visitor sees when they land on your site. Everything that is visible to a visitor is on the table here. I know what you’re thinking. Isn’t this covered by picking and installing a theme? Somewhat, yes. But unless you want your site to look like other people’s sites who use the same theme, it would benefit you greatly to spend some time on customization.
To get your website presentable to the public (and increase curb appeal) you need to do a few specific things:
Optimize Your Branding
Your brand is about more than a logo and slogan. It’s the complete package of how you want to be perceived by the world. That comes down to everything from color scheme to the voice of your web copy.
From a site customization standpoint, you can work on your branding by diving into the WordPress customizer and ensuring everything you can customize has been, including a custom logo and header. Make sure you’ve filled out the site’s tagline (or at least removed “Just another WordPress site” for goodness sake!) and updated the colors to match your company’s marketing collateral.
Also, be certain to fill out any spaces for your social media links, contact information, and newsletter signup info. Branding is about making yourself easily contactable, too.
Make CSS Modifications
If you find a theme you like but need to make more changes than the theme customizer allows, you’re going to have to dig into the CSS. Not to worry! This doesn’t have to be as scary as it might seem. Code newbies can manage it, I promise. But before you touch anything in your site’s code, you need to backup your site first. And preferably, you’ll make a child theme. We have a detailed tutorial on the subject.
Once everything’s in order and safe and secure for customizing, you can start making changes.
Jetpack also offers a handy custom CSS module for on-the-fly edits, they say without the need for a child theme, but I still think it’s a good idea to create one anyway.
Here are a few of our recent tutorials for customizing your site’s CSS:
- Adding custom fonts with @Font-Face
- Add masonry and grid layouts
- Custom image styling
- Custom menu icons
- Make a full-width page
Another thing you can do to improve how your site is received is to modify the permalinks. The default URLs for any posts or pages you make follow the format of yoursitename.com/?p=123 which is not exactly attractive. They do nothing to tell the visitor what the page is about, they’re not memorable, and they’re terrible for SEO.
You can easily modify them within the Settings > Permalinks menu. Customize these URL so they’re readable to humans and search engines and you’ll be doing a lot toward improving the look and feel of your site to the outside world. I recommend switching the permalinks from numbers to “post name” for the best effect.
Add a Site Map
A sitemap is a great way to help search engines see everything on your site. It makes your site more crawlable. It also gives visitors a handy resource to see every page on your site. You can easily add a sitemap using a plugin like Sitemap, Better WordPress Google XML Sitemaps, Google Sitemap by BestWebSoft, and WP Sitemap Page.
Or, you can create one manually. This latter option may be preferable if you don’t have very many pages on your site.
Create a Custom 404 page
Another thing you can do to improve your site’s curb appeal is to add a custom 404 page. The benefits of this are two-fold. Not only does it give you another opportunity to incorporate personal branding on your site, it also makes sure anyone who has lost their way while browsing it gets back on track. You can use your 404 page to point lost web surfers back to your homepage. You can even offer a custom search bar to help visitors find what they were looking for.
While you can always manually code a custom 404 page, there are many plugins out there that make this a snap as well. Just a few include Custom 404 Pro, Custom 404 Error Page, and 404page for free options and 5sec Proper 404 and WordPress Ultimate 404 Plugin for premium.
If you don’t want to mess with creating a page for when people mistype a URL, you can always configure your site to automatically redirect visitors to a particular page when they land on one that doesn’t exist. A plugin that can do this for you is the WordPress Ultimate Redirect Plugin.
Thinking about what you can do to make your site stand out and appeal to your visitors is crucial. Remember to check off the following from your to-do list when polishing your site’s exterior.
Exterior Decor Checklist:
- Ensure consistent branding across logos, color schemes, fonts, and web copy.
- Explore and utilize the theme options panel.
- Explore and utilize extra theme menus.
- Backup your site/create a child theme.
- Make modifications directly via CSS (if applicable).
- Modify the permalinks.
- Create a sitemap manually or via plugin
- Manually code or use a plugin to create a custom 404 page.
Once the exterior of a home is complete, you can start working on the interior. The inside needs some paint, too. It needs trim and flooring. It even needs some lighting. In the context of building a site, the interior is akin to the backend of your site. The dashboard. Good ol’ wp-admin.
While you don’t have to customize the backend of your site, it’s always a good idea to do so, even if you’re the only person who will see it. I mean, you want to be comfortable in your own home, right? And there’s always the possibility that a client or contractors will need access to the backend of your site, which means you need to have your ducks in a row.
Backend customization is often referred to as white labeling. We wrote a lengthy tutorial on this process a while ago if you want to fully dive into all of your options, but in the meantime, here are a few touchstones to get you started:
Customize What’s Viewable
One very important thing you can do for the backend of your site is to modify what’s visible. By default, certain items are viewable when you install WordPress. The dashboard always shows the At a Glance section, which displays a post, page, and comment count, as well as update notifications; Quick Draft, which lets you write up a post and publish it without navigating away from the main dashboard; Drafts; Activity, which displays recently published posts and new comments; and WordPress News.
Some plugins will add more items to the dashboard. For instance, installing Jetpack enabled Site Stats on my site. Plugins may also add more menu options to the left-hand side of your dashboard.
However, you can take this a step further by manually changing what’s visible on your dashboard. You can even add custom widgets here to display info that’s relevant to your specific site. For instance, if you have a lot of contributors to your site, you may wish to include instructions for using the dashboard. You can even offer instructional videos in this space.
Offer Further Branding
The whole idea of white labeling the backend of your site is perfect for offering further branding. You can remove the WordPress branding (and eliminate potential client confusion) and add your own logos on the dashboard and on the login page. You can even add a custom footer to offer specific info about your site like who designed your custom theme, for instance, or your contact information.
Add User Support and Features
Like I mentioned above, you can add tutorials to the backend of your site. You can accomplish this specifically by adding a custom widget to display information to your users. You can write out the instructions right within the widget, or offer a link to a longer tutorial. Or you can install a plugin that simplifies the dashboard in case your clients or writers are WordPress newbies. Something like our Easy Blogging, Advanced Custom Fields, or Clean Up the Dashboard are good choices. You can even link to video tutorials here. And hey, if you need WordPress how-to videos to share with your clients, we’ve got you covered.
Another thing you might want to do is install a plugin that makes managing content easier. Something that creates a clear workflow from drafts through edits, for instance, or something that adds an editorial calendar for better deadline management. A few plugins that can help you accomplish this include Oasis Workflow, Edit Flow, Editorial Calendar, and CoSchedule.
Interior Decor Checklist
- Remove unnecessary items from the dashboard.
- Add more features to your dashboard like site stats.
- Add custom widgets to display site information and/or to offer guidance to your clients/users.
- Remove WordPress branding and insert your own.
- Use a white labeling plugin.
- Simplify your workflow.
Install (and Upgrade) Your Appliances
With the inside of your house looking spiffy, it’s time to get down to the functionality. You can’t live in a house if it doesn’t have running water. And you can’t comfortably live in a house if the major appliances aren’t working (or it’s missing them altogether). When it comes to your WordPress site, the appliances and functions are commanded by plugins.
It’s never a good idea to go hog wild on plugins—too many can definitely bog down your site and put its security at risk—but some carefully selected ones can increase functionality and take your site from basic to exceptional.
Here are the broad categories of plugins you need to consider, with a few suggestions for each:
While WordPress comes equipped to handle comments in Core, it can be a good idea to seek out plugin solutions that expand your control over comments, particularly with regard to spam blocking and filtering.
If you run a website for your business, you’re going to want to build an email list. This is always a good idea because you can leverage it to increase your client base or to make more sales later. To capture leads, however, you need a signup form that’s attractive and catches people’s attention. Unfortunately, Core isn’t equipped with this ability, so you’ll need a plugin to do the job for you.
When you run a website, it’s important that you keep tabs on everything, from how many people are visiting to which pages are the most popular. You’ll also want to note what search queries garner the most traffic and how often your sales pages result in conversion.That would be a lot to keep track of on your own, which is why analytics plugins are so useful. They give you the bird’s eye view and then some.
The most popular analytics tool is Google Analytics. It also has the most plugins integrated with WordPress. Other analytics tools exist, however, depending on your needs. If you run an online store, you might need something more specifically targeted toward eCommerce, for instance (though Google’s is quite robust in that area now as well).
A fast-loading site is a site that plays nice with its visitors. That is, it makes for a pleasant user experience. We’ve all been to that website that takes a decade to load, so you know first hand how annoying that is and how quickly you hit the “Back” button when you encounter it.
To increase site speed, caching is the way to go. There are really two plugins that act as the gold standard in this regard. They are W3 Total Cache and WP Super Cache and either will do the job quite nicely.
Another aspect you need to think about is image optimization. Smaller image files mean your site will load faster. And while you can’t skimp on the quality of your images, you can do your very best to compress them.
Search engine optimization has come a long way since the days of keyword stuffing. That’s why it’s so important to utilize the available resources to fully optimize your site. Sure, WordPress comes preloaded search engine friendly, but that doesn’t mean you can’t do more to increase your likelihood of being indexed higher.
Finally, when it comes to adding site features, there is none more important than security. You can never be too cautious, especially since adding plugins and themes can open your site up to vulnerabilities. But you need plugins and themes! And the hackers and attackers know this. That’s where a solid security plugin can save the day.
The top security plugins out there include features that prevent brute force attacks, obscure database info, and offer backup and restore options. A few to consider include iThemes Security, Wordfence Security, Sucuri Security, and BulletProof Security.
Appliance Installation Checklist
- Decide on the features you’d like to add to your site.
- Evaluate your comment system.
- Evaluate your newsletter/opt-in signup forms.
- Pick an analytics plugin.
- Pick a caching plugin.
- Evaluate your image optimization.
- Assess your SEO needs.
- Install a security plugin.
Hold an Open House
Once you have your site effectively finished, you need to prep it for publication. But before you make the big reveal, you have to take some steps to make sure everything is in working order. This means doing some testing on your end and getting a second (or third or fourth) pair of eyes on your site.
Do Cross-Browser Checks
While your site might look absolutely perfect on your preferred browser, it might not look so great on all of them, or even on someone else’s computer. This is why testing is so important before a site’s launch. You want everything to look exactly as you intended for every visitor. No one should have to work to see your content!
It’s a really good idea to download all the latest versions of the popular browsers to test your site on them. Current popular browsers include Chrome, Firefox, Safari 3, Opera, Internet Explorer 8, and multiple other browsers. It’s a good idea to test your site on older browsers to make sure there’s good backward compatibility, too. And you should always test your site on mobile devices. It needs to look good on Android and iPhone devices so if you don’t have one of those, you might need to borrow one or recruit a friend for help.
We also need to consider the type of computer you’re using. Are you using a PC or Mac? Again, your site needs to look good on both platforms. Short of finding people who have all the different types of computers and browsers you need, there are virtual testing options and services. Online services like NetRenderer and BrowserShots give you the opportunity to test your site on multiple browsers virtually.
Find Beta Testers
Once you’ve completed the browser compatibility checks and made any necessary fixes, it’s time to get a few people on board to test your site first hand. These people will not only tell you if things look “off” on your site, but they can also help discover design inconsistencies, bugs, and even grammatical errors in your copy.
It’s pretty easy to find beta testers or site reviewers. You can just call on some of your web developer friends or industry colleagues. Or, you can put out a call for help on social media. You may even find it helpful to offer a small perk for helping you out like a discount, a coupon, or some other benefit. Just a small way of saying thank you can make all the difference in the number of willing beta testers you come across.
Open House Checklist
- Give your site a good once over to make sure everything looks like you want it.
- Conduct cross browser compatibility checks manually and/or using services.
- Find beta testers and make changes based on their feedback.
Do One Last Walkthrough
You’re down to the finishing touches now. The site has been built. You’ve tested your site and received feedback from beta testers. You’ve likely made a few changes based on their suggestions, too. But now is the time to go back over your site one last time to make sure everything is pixel perfect.
Your site should look good, function well, offer an intuitive user experience, and get your message across.
After making any final tweaks, you should also take some time to make a plan for the future. Launching a site is great but if you don’t have a plan for updates and maintenance in place, you’re going to be left scrambling.
Develop a Content Plan
Every site needs content and to stay relevant with your readers and search engines, it needs to be updated regularly. You should develop an editorial schedule for your site—your blog especially—and prepare enough content in advance to be about a month ahead to give yourself plenty of cushion.
Develop a Maintenance Schedule
While you can choose to update your site and your plugins whenever you see a little notification pop-up in the WordPress admin, it’s a better idea to have a set schedule in place for completing such tasks. Pick one day per week to complete maintenance-related tasks, such as updating themes and plugins and tidying up your database. You won’t need to spend that long on it, but having a predetermined block of time dedicated to this ensures you will always keep your site up-to-date.
Establish a Backup System
Backing up your site on a regular basis is essential. If you don’t, you stand to lose everything if your site is hacked. Or if you install an update that causes conflict with existing plugins or themes, you’ll have hours upon hours of site fixes on your hands. Don’t let this happen to you.
Some security plugins include backup systems like iThemes. If you’d rather use a dedicated backup option, many plugins help to facilitate this including Snapshot, BackUpWordPress, VaultPress, UpdraftPlus Backup and Restoration, and WordPress Backup to Dropbox.
Put it on the Market
So, you’re not selling your website, but I had to carry out this real estate analogy to the end, don’t you know? All that’s left for you to do is publish your website. Make it live. You can do this either by hitting “Publish” on all of your pages or moving a site from a localhost over to a live server. Whatever method you choose is up to you, but the latter can make for a more seamless publication process. That is, your live site won’t appear to visitors one page at a time and everything will be available at once.
You now know how to build a WordPress site from scratch. I know it’s not easy, but hopefully going through all of the steps in both parts of this series make the task of working with WordPress a little bit easier so future sites are more intuitive to create.
As always, I now want to hear from you. Was there anything regarding site aesthetics and functionality you found difficult to implement? Did I miss anything crucial? Please feel free to sound off below.