Simple HTML Tips for Formatting Your WordPress Blog

For small and medium sized businesses, a blog acts as the hub of your social media activities. Bright Blue Wave Community Manager Hannah Rosen shares her HTML expertise, offering basic tips that will make your WordPress blog look its best.

HTML WordPressWordPress has become one of the most popular tools for content creators across the web because of its accessibility for non-coders. It provides a platform for anyone to share content online easily and at little to no cost.

Just because it’s easy to press publish, however, does not mean it’s easy to make your content look the way you want.

At Bright Blue Wave, we’ve found that a bit of basic HTML and CSS knowledge translates into a lot of power when it comes to customizing the format of a WordPress blog.

What you need to know:

The format of your blog posts is going to be determined by the style sheets behind your website. If you don’t have a background in coding CSS, you should probably avoid messing around with the style sheets themselves to avoid breaking the whole site. Instead, you can tinker in the code view of the post editor to override anything that’s not working for you.

Here are our top tips for quick overrides to get your layout just right:

Spacing:
Struggling with spacing is a common issue. Spaces appear out of nowhere, or you’re trying to add a space and it won’t stick. To solve this problem, flip into the HTML view.

If your text is wrapped in paragraph tags (<p>Text</p>) or heading tags (<h2>Text</h2>), it will inherit the style properties associated with them, and likely add spaces before and after. Try removing the tags all together to avoid unnecessary spaces.

If you’re trying to add space between lines and it just wont stick, adding in a simple line break tag should do the trick (<br>).

spacing

Font Size:
Font size can be one of the most frustrating things to manipulate in your WordPress post editor. The most effective strategy is to flip into the HTML view, and add a simple piece of font-size override code to the line of text you are trying to adjust.

Ie. <p>This is text.</p> becomes

<p style=”font-size: 20pt”>This is text.</p>

Formatting Images:
Creating a layout where images line up nicely to the left or right of a chunk of text doesn’t need to be hard. Keep in mind that you should insert the image before the text, and use the media editor to select alignment and sizing options.

formattingimages

Embedding Video:
Another pain point for WordPress users is embedding video.  Depending on the source, this can involve varying levels of difficulty.

Including a Youtube or Vimeo video should be fairly straightforward. If it’s not working, wrapping the video URL in WordPress’ embed tags should solve the problem.

embed

Other sources, for example TEDTalks, offer an embed code that can sometimes cause more confusion. Copy the embed code into the HTML editor and don’t worry if the video doesn’t appear in preview mode. It will work when the post is published.