Skip navigation Blog Bling: Lines and Smilies

In part one of the Blog Bling series, we covered how to add graphic images to your blog. In this section, we’re going to cover how to add more visual images with lines and smilies.

Exploring Horizontal and Vertical Lines

One of the strongest visual elements in design is the line. In WordPress and web page design, creating horizontal lines are very simple. In the HTML editor, type <hr /> and you will have a horizontal line on your blog post.

I will often use a horizontal line tag to highlight sections of programming code on my blog such as:

Others may use horizontal lines to break up sections of text or highlight specific sections. When you see the line, you know there’s a change in topic coming.

Not all horizontal lines are designed equally in WordPress Themes. Some Themes on don’t even have a style for horizontal lines so you might not see any results. Test your WordPress Theme to see what your horizontal line looks like, or design your own.

Horizontal lines are best placed between two paragraphs with a space before and after them. They are used to divide content sections.

Example of a graphic separating content sections with lines

To design your own, you can add the Custom CSS feature to your blog, or use a graphic image to create your horizontal or vertical lines.

Example of a graphic separating content sections

As a rule, HTML horizontal line tags in web pages go across the width of the container they are in. Most WordPress Themes feature space above and below a horizontal line, though the space is flexible by CSS design.

If you create and use your own horizontal line graphic, make sure the width doesn’t exceed the narrowest width of your post content column on your WordPress Theme. A line longer than the width will push your sidebar or other elements around. Typically, you may not want the horizontal line graphic to exceed 400-500 pixels in width.

Graphic vertical line barA vertical line that would work in is not possible with an HTML tag, though, vertical lines can be created graphically.

Vertical lines tend to group content next to them. Or divide them. Within your WordPress post content area, vertical lines are typically found next to your words, like a frame.

Not all vertical lines are “lines”, but visual lines created with graphics. For example, the photograph along the side of the quote below creates a strong vertical line to highlight the words:

example of a vertical line graphicThat which fills
my heart and soul –
Must be expressed in
drawings and pictures –
I am in a rage of work.

Vincent Van Gogh


You can create your own horizontal or vertical line in most graphics editing programs, or choose from the many found on free art and clip art sites. For more information and tips on uploading images to your blog, see Adding Images to Your Blog.

Smiling With Smilies

Smilies are the yellow circle faces with grins 😀 , tongues out, and all types of expressions.

In WordPress, they are created by using the keyboard equivalent and then converted into those yellow faces. On blogs, these work within the post and comment areas, adding little spots of color.

Smilies came about in the early days of the Internet as people realized that their printed words often didn’t reflect their true intent. One of the most common smilies is the “wink” 😉 which implies satire and silliness even though the words might not, such as “I would never say anything like that. 😉 ”

Adding smilies, also known as emoticons to your blog comes in two flavors. You can allow WordPress to automatically convert your emoticon text into those yellow circle faces or turn that feature off and use only text emoticons.

To turn smilies on and off in your blog, go to Options > Writing > Formatting and check the box to enable or disable automatically converting emoticons to smiley graphics.

Enable or disable WordPress smilies graphics

Here are the most common smilies:

  • :) – 🙂
  • :D – 😀
  • ;-) – 😉
  • :( – 😦
  • :o – 😮
  • :| – 😐
  • 8O – 😯
  • :x – 😡
  • :P – 😛
  • :? – 😕
  • :evil: – 👿
  • :mrgreen::mrgreen:
  • :arrow: – ➡
  • :idea: – 💡

Be careful as smilies 😉 can really clutter 😦 up your blog post :mrgreen: very fast. And 😮 not all WordPress Themes 👿 are designed to easily 💡 accommodate smilies in 😡 blog posts 😛 .

You can learn more about Smilies in WordPress from the WordPress Codex Using Smilies and Which Smilies Can I Use on articles.

There will be more coming at your tomorrow. Stay tuned!

Related Articles

Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network


  1. Posted January 30, 2007 at 9:09 am | Permalink

    Hi Lorelle,

    Splashcast has released their multimedia web widget that supports integration with blogs.

    More info here: Getting Started with Splashcast on

  2. Posted February 20, 2007 at 8:57 am | Permalink

    And if you dont like this yellow Smilies, you can go to my Blog and can Download around 600 green Smilies not only for WordPress. 😉

    Its a german Blog, so I link directly to the Download-Page:

  3. Posted October 1, 2007 at 6:05 pm | Permalink

    Mike Cherim of wrote a great article about how to make and implement our own custom smilies for use in your hosted WordPress theme.

    Following Mike’s lead, I was able to easily add custom smilies to my own blog, too.

  4. jonasbrothersgurl
    Posted October 3, 2008 at 5:08 pm | Permalink

    i have a question how did u make ur blog like this there’s no deighn like dis i no u used the sandbox but how did u get it to be like this?

  5. Posted October 3, 2008 at 5:29 pm | Permalink

    @ jonasbrothersgurl:

    If I understand you, you are asking how did I design my WordPress Theme on this blog. I designed it using the Sandbox Theme with the CSS Extra option. Yes, it is one of a kind and hopefully will stay that way, even when I redesign it. 😀

    If you are looking for specifics in how to design a WordPress Theme and use CSS, I recommend that you check out tutorials on web design found all over the web. Good luck designing your own.

  6. Posted October 23, 2010 at 5:22 am | Permalink

    Um how do you do this??? This was completely unhelpful.

    • Posted October 23, 2010 at 12:52 pm | Permalink

      How do you do what? When asking questions on sites like this, you have to be more specific. Are you having trouble understanding the instructions?

  7. handy
    Posted November 28, 2010 at 12:29 am | Permalink

    I’m using the twenty-twenty theme with WordPress but the horizontal line html code doesn’t seem to give the promised results – no lines appear on the page. I’m not exactly sure what the problem is but I’m guessing it’s the theme…any way around this? Thanks in advance for any tips!

    • Posted November 29, 2010 at 4:32 pm | Permalink

      Probably because it isn’t styled. Time to add some styles to the stylesheet for the horizontal line. 😀

  8. Posted November 29, 2010 at 6:47 pm | Permalink

    Hi, thanks for the quick response! I’m a beginner at all this and was wondering if you could point me in the direction of some specific styles that can perform this task. Thanks!

  9. Posted January 24, 2011 at 2:16 pm | Permalink

    hallo Lorelle, can i use “hr” horizontal line with custom line size on header.php? thanks


    • Posted January 25, 2011 at 11:14 am | Permalink

      You can put a border or include a horizontal line in the header.php file, but not on as there is no access to WordPress Themes for such control, though you can add borders through the premium Custom CSS option. For self-hosted WordPress blogs and their Themes, you can do anything you want, though I would not use <hr /> as I would use CSS to put a border in. Much more scalable and less code.

  10. Posted January 21, 2012 at 9:31 am | Permalink

    I was getting frustrated trying to add a separator line within my post – had no idea it was so easy – it works, thank you!

15 Trackbacks/Pingbacks

  1. […] written about how to add smilies to your blog and there are two great how to articles in the WordPress Codex, the online manual for WordPress […]

  2. […] Blog Bling: Lines and Smilies […]

  3. […] Blog Bling: Lines and Smilies […]

  4. […] Blog Bling: Lines and Smilies […]

  5. […] Blog Bling: Lines and Smilies […]

  6. […] Blog Bling: Lines and Smilies […]

  7. […] Blog Bling: Lines and Smilies […]

  8. […] Blog Bling: Lines and Smilies […]

  9. […] a lot, haven’t we? I’ve shown you how to add graphics and photographs and video, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, and…have I […]

  10. […] covered adding blog bling to your blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links. Now it’s time to add some blog bling to your […]

  11. […] far, the Blog Bling series has covered adding graphic images, lines and smilies, social bookmarking links, and font bling. The techniques covered in this section on blockquotes […]

  12. […] covered how to using images, logos, and badges to decorate your blog, how to add horizontal and vertical lines and smilies, and Social Bookmarking Submit Links on WordPress Blogs, including blogs. In this […]

  13. […] Blog Bling: Lines and Smilies […]

  14. […] Blog Bling: Lines and Smilies […]

  15. […] week covering how to blog bling your blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, podcasts, audio, […]

Post a Comment

Required fields are marked *

%d bloggers like this: