Using a featured image as background
A super easy, yet efficient, way to decorate your posts is to use the “featured image” function to display a custom background image. This technique creates many possibilities and will make each of your posts to look different.
To apply this tip, edit the single.php file from your theme, and add the following code. Once done, simply set backgrounds using the “featured image” WordPress feature.
<div class="image-thumbnail" style="background-image; url(<?php echo get_the_post_thumbnail_url() ?>)"></div>
→ Source/additional information
Make sure WordPress is written with its capital P
It’s not wordpress… It’s WordPress! Especially if you’re blogging about technology, web design or coding, that widespread spelling mistake is gonna make you look unprofessional. So if you have a hard time remembering the correct spelling, you’ll be happy to know that there’s a function made for that purpose. Have a look below to see how it works:
<?php capital_P_dangit( "I have a hard time remembering the correct spelling of wordpress" ); ?>
→ Source/Additional information
Display code nicely
When you’re writing code on your blog, things can turn ugly really quick: encoding problems, unexpected line breaks, and so on. Sadly, many free and commercial themes aren’t fit to display code properly.
There’s a whole bunch of plugins that can help you to display code on your blog, and also this post I wrote a few weeks ago. In a hurry? Here’s the exact CSS code I use on my blog to display code:
pre{
background:#f5f5f5;
border:1px #eee solid;
border-top:20px #eee solid;
font-family:Consolas, courier;
font-size:0.9em;
white-space:pre;
overflow-x:auto;
}
Pay attention to typography
When it comes to the visual aspect of a blog post, typography is at least 80% of it. Make sure your text is readable (also on mobiles!) by using different headline sizes, blockquotes, indentation…
Although there are no written rules in terms of typography, here’s a few guidelines that I tend to use every time I design a website:
- When it comes to fonts, less is more: 3/4 different fonts is a good balance for your website.
- Always make sure that the contrast between the font color and the background makes it readable.
- Make use of different font sizes, font colors, etc, for different sections of text (ex: quotes, subtitles, excerpts…)
- Make sure that your font size is big enough to be read by everyone, on any kind of device.
If you’d like to explore this interesting topic more, here’s a very interesting article by WPmudev.
Make it display quickly
The look of a blog post is definitely an important thing, but even more important is your loading speed. If your page takes 10 seconds to load, never mind how pretty it is, 95% of potential visitors won’t wait and will simply visit your competitor’s site instead of yours.
Use Google PageSpeed Insights to check how fast your website or page displays on desktops and mobiles. You’ll get a handful of pointers on what to fix to make your site faster. If you need more help, check this article out, which contains step-by-step fixes for the most common speed problems on a WordPress blog.