After checking out the many questions, I’ve decided to put together a guide for WordPress blog design.
This guide is for WordPress users. Often website designers don’t design for wordpress.com (I do!) and it’s because there isn’t a lot of apparent flexibility.
But there are quite a few ways to customize a wordpress.com blog. I want to walk you through the process I take when creating a design.
For the most flexibility, you should have the paid WP plan. I’ll note the sections that are paid-only as we get to them.
Choosing a WordPress Theme
My favorite themes for WordPress.com users are
Sela is great for business owners wanting to blog a little but display a portfolio or service pages. It is a little advanced for beginners, but if you’re up for the challenge it has a great built-in homepage that automatically generates and is image-heavy.
Toujours is great for bloggers who want a slider at the top of their blog. It’s a widescreen blog formatted to work with background patterns and large images. It’s great for lifestyle bloggers for sure.
Twenty Twelve is the BEST theme for customization. It’s a blank slate and is the theme I use as a base for ALL my design work now. I will use Twenty Twelve for the videos in this guide.
Whichever you choose, here’s a short video to show you how to change your WordPress.com theme
Properly using the Customizer
The most under-utilized feature in WordPress is the Customizer. You can access the Customizer by using the following steps:
- Click My Site
- Scroll to Theme
- Click the customize button
You’ll want to use the customizer to change your headers, menus, etc. This video will show you how I use the customizer to edit a basic blog.
In this video I set the following:
- Site Name & Tagline (fill this info out, then uncheck the display box)
- Background Color
Note: for Twenty Twelve, the header size is 960 by 250. You can make a header image in Canva for free.99.
Customizing your blog sidebar
Next on the design list, you’re going to want to upgrade your sidebar. There multiple ways to do this. But the easiest way is to add images.
Below is a video showing how I setup my sidebars quickly. I use Image Widgets. You’ll want to have created a profile photo, and a few category, or page, images.
I normally pick my 3 favorite categories to make into images.
You can also use images for your social media links, if you like. Just try to keep it simple.
If you don’t want italic text below your images, use the text widget immediately after your about me image widget.
Don’t forget your blog post design
Now, you want to properly format your blog posts. This video walks you through how I would do it for my theoretical wordpress.com blog.
Be sure to do the following:
- Add a post image
- Break long paragraphs into short ones (2-3 sentences)
- Add headings (h2-h3)
- Add links to social media and other posts (shoot for 3)
- Add images, or click to tweet images (next topic)
You want to be sure to use bold text, lists, and headings when possible so people can skim. Most people skim first then decide if they want to invest time to read your posts.
Break up your paragraphs and allow the whitespace to comfort your viewers eye. Large bodies of text stress most people out.
Short paragraphs are also easier to digest on mobile devices.
Click to Tweet Hacks
Lastly, by popular demand, I am going to walk you through I how would do a click to tweet button without a plugin.
All you need is to create a quote image in Canva (for free). Make sure your image says ‘click to tweet’ near the bottom.
Navigate to sharelinkgenerator.com and use the tutorial below.
- Link to yourself in the quote (use your handle like @xobritdear)
- Include a link you want to share your post
- Keep it under 140 characters
A Note for people with Premium Plans
WordPress offers even more functionality for paying customers. The paid plan average to about $10 a month and allows you to use custom CSS.
If you have a premium plan, your blog can be customized by a designer who specializes in wordpress.com blogs (like me).
Until then, I’d strongly recommend you check out W3Schools resource on CSS.
READ: W3School CSS Tutorials
That’s all for this tutorial. It’s meant to walk you through the basics of designing a cute WordPress blog for yourself.
Let me leave you with some last second tips:
- Always choose a design with limited clutter
- Utilize white space. It’s peaceful and pleasing to the eye
- Let your images speak
- Include large images when appropriate
- Make sure all your post images are the same width and height
- Use sidebar images of 500 by 500px
- Include links in every post (it’s a pop of color)
- Always include a featured image