Creating a text box in a blog post

Creating a text box within a blog post or page is just one way to make a portion of your article’s text pop. My suggestions on what to use this text box method for: quotes, your opinions or thoughts scattered throughout an article, or to make the main ideas stand out to your readers. What else could we use this for?

Thankfully, it’s not too difficult to create a text box in WordPress, using CSS code in your WordPress text editor.

I discovered a tutorial on how to create simple text boxes in posts like this one — the article’s by Stephen Cronin at More Than Scratch the Surface.

The How-To

Write your blog post out in the “add new post” section–as you would normally, in the Visual Editor tab. Then switch over to the Text Editor tab (both of these are on the upper right section of where you type your text).

create a text box in WordPress post

Now it’s time to learn some code–or, at the very least, copy and paste some code! Locate the verbiage that you want inside the text box. At the beginning (no spaces!), place this line of code:

css

At the end of the text you want in the box, put this immediately after it:

css2As Stephen states, you won’t be able to do a text box with more than one paragraph within it, since the ending tag

is the same code that we use to separate paragraphs in WordPress.

If the gray’s just too bland for you, try out a different hex color number in the code:

Replace the background-color: #eeeeee; with a different hex color #–for this box I chose #93b5d9.

This process of creating a text box within a blog post or page will work for both WordPress.com blogs or the self-hosted WordPress.org blogs!

Read a more techy version of the how-to, as well as learn how to input this code in your external CSS or set up a quicktag button, by heading over to Stephen’s article here: “WordPress – Simple CSS Text Boxes in Posts“.

Connect on

Kristin

Blog Consultant at Be Blog Smart
Kristin Ruck is the owner of and blog consultant at Be Blog Smart -- where the goal is to provide you, as an emerging blogger venturing out into the complex world of blogging platforms, methods, and information, the tools to easily comprehend the how-tos of this arena of the Internet, particularly WordPress blogging.
As a blogger, website maintainer and more, with a B.A. in Journalism, I'd love to have the opportunity to set up a blog (like this one) for you! Click "hire me" for details!
Connect on

5 Comments

  1. Kiara's Gravatar Kiara
    January 5, 2014    

    Great and helpful. I could also use some info on how to change the height and width of the text box and maybe add images too.

    • Kristin's Gravatar Kristin
      January 8, 2014    

      Thanks for the comment, Kiara — I’ll look into this for you!

    • Kristin's Gravatar Kristin
      January 17, 2014    

      Hi Kiara,
      I apologize for the delay in getting back you — but I did find some answers to your questions:

    • To change height/weight of text box to, say a box 200px wide by 300px high: add “width: 200px; height:300px
    • To add images: once you’ve input your code on your post’s text editor, just flip over to the visual editor tab, click where you want your image, and then add it like normal (check out this if you need help adding images).
    • To change text color: change the css color number in the section that has “color: #555555
    • So, for a box 200px by 300px, with purple lettering and an image, I would use this code:
      Stephen Cronin, who created the code for the text box I wrote about above, also created a color selector tool for the text box, which is viewable here.
      Hope this helps!

  • June 9, 2014    

    Greetings! Very useful advice in this particular post!
    It’s the little changes that will make the most significant changes.
    Thanks a lot for sharing!

    • Kristin's Gravatar Kristin
      June 18, 2014    

      Thank you for the note! Have you used these text boxes in your blog posts?

  • What are your thoughts?

    About Be Blog Smart


    The goal of Be Blog Smart is to provide you, as an emerging blogger venturing out into the complex world of blogging platforms, methods, and information, the tools to easily comprehend the how-tos of this arena of the Internet, particularly WordPress blogging.

    About Me

    Kristin Ruck | Be Blog Smart

    I'm Kristin Ruck: blogger, website maintainer and more, with a B.A. in Journalism. I'd love to have the opportunity to set up a blog (like this one) for you!
    Let me know how I can help you!

    SEO Powered by Platinum SEO from Techblissonline