WordPress – Simple CSS Text Boxes In Posts

| Created: June 8th, 2007
WordPress Hacks 65 Comments

In this article, I outline how to create simple text boxes using both inline and external CSS and how to set up a quicktag button so you can use them with the minimum of effort. You’ll be surprised at how easy it is to do!

I often have information that I want to include in a post, without it being part of the main body of the article. For example, additional information that may be useful to readers, but that disrupts the flow of the post.

The ideal way to include this sort of information is in a text box with formatting that sets it apart.

The information is available, but the formatting separates it from the main body of the post in the reader’s mind.

Books and websites often use this technique, so why not inside posts? It’s possible to use blockquotes for this purpose, but I wanted to keep that for quoting other people, so I decided to create text boxes using CSS.

If you’re interested in text boxes with rounded corners, this is a little more difficult (but so much cooler). I don’t cover that in this article, as it would make it too long, but you can read about it in my Rounded Text Boxes in Posts article.

Using Inline CSS

It is simple to use inline CSS to create a box around a paragraph.

First, use the default WordPress Editor (ie the Visual tab page) to write the entire post, including the text you want displayed in a text box. When you are finished, go to the Code tab page and locate the paragraph to go in the box. Add:

[php]<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">[/php]

immediately before the text and </p> immediately after it. Save this and you should get a text box similar to this one:

Note, if you are using the Visual Editor, with the default settings, you cannot use <code><div></code> instead of <code><p></code>. If you do, WordPress converts it to <code><p></code> anyway and may break the code in the process! Unfortunately this means that this method only works for one paragraph – see my rounded text boxes in posts”>Rounded Text Boxes in Posts article for boxes with more than one paragraph.

You can change the style of the text box (ie the colours, font, size, border, etc), simply by changing the CSS in the style="" section. This requires a basic knowledge of CSS, which is beyond the scope of this article, but an Internet search will reveal many sites with information on CSS.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.

Using External CSS

If you want your text boxes to have a common style across your site, use external, rather than internal, CSS. You set up the style information once, in your external CSS file and reference it each time you add a text box.

If you want to change the style, you only need to change it in one place (the external CSS file) and it will automatically change in every post using this style. With inline CSS you would have to manually change each post.

The external CSS file for the theme you are using is normally style.css in the wp-content/themes/yourtheme folder. Download this file using an FTP program, make a copy of it in case you make a mistake, then use a text editor to add the following to the end of style.css:

[php].textbox {padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid}[/php]

The style information can be changed to suit your needs. When finished, save the file, then ftp it back up to the server, overwriting the original.

To create a text box, simply reference the new class (textbox) in a <p> tag. Use the Visual Editor to write the entire post, go to the Code tab page, locate the paragraph to go in the box and add: <p class="textbox"> immediately before the text and </p> immediately after it.

WORDPRESS.COM Users
Apparently wordpress.com does not allow any inline CSS and charges extra for external CSS. If so, the inline CSS solution above will not work for you. If you have purchased the CSS Editing upgrade, the external CSS solution above should work.
There are other options that don’t use CSS, as outlined by Lorelle VanFossen, but be warned: these techniques are considered out of date by most people, including Lorrelle who is providing them as as workaround to wordpress.com’s CSS policy.

Creating a Quicktag button for your text box style

If you are going to use text boxes often, you can set up a quicktag button for either the internal or external CSS method. This means you don’t even need to type the line calling the text box style. Simply go the Code tab page, select the paragraph you want and click the quicktag. Easy!

I found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen. Note Lorelle’s advice on making a copy of your changes so you can add them again if lost when upgrading WordPress.

To set up a quick tag for the text box styles outlined above, you need to change the quicktags.js file in the wp-includes/js folder. Download this file using an ftp program, make a copy of it and open the original with a text editor. Find the following section (at about line 126):

[php]edButtons[edButtons.length] =
new edButton(‘ed_more’
,’more’
,'<!–more–>’
,”
,’t’
,-1
);[/php]

and add this on the line after it (if using the inline CSS method):

[php]edButtons[edButtons.length] =
new edButton(‘ed_textbox’
,’textbox’
,’&lt;p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">’
,’&lt;/p>’
,”
);[/php]

If you are using the external CSS method, you need to add this instead:

[php]edButtons[edButtons.length] =
new edButton(‘ed_textbox’
,’textbox’
,’&lt;p class="textbox">’
,’&lt;/p>’
,”
);[/php]

When you are finished, save the file, then ftp it back up to the server, overwriting the original file.

You’re done! You should now have a textbox quicktag in the Code tab page of the editor, which will add the appropriate code when you select the paragraph and click the quicktag.

Next article: Rounded Corners

As you can see, simple square text boxes are easy and effective. However, what I really want are text boxes with rounded corners. I explain how to create these in my Rounded Text Boxes in Posts article.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.

65 responses on “WordPress – Simple CSS Text Boxes In Posts

  1. K-IntheHouse

    I am in the process of digesting some CSS basics right now and this is a great example of its power. Look forward to your next article. 🙂

  2. Carpentry Jobs

    Will I need to pay WordPress for external CSS even if I host it on my own server with my own domain name?

  3. Stephen Cronin Post author

    CJ, No, that’s only if you use wordpress.com (ie the same way you might use blogspot.com). WordPress.com impose limitations on what you can do.

    If you install WordPress on on your own server (or a hosted server), then you have total control over everything, including CSS. And it”s free (apart from any hosting and domain name costs of course). That’s the way to go!

  4. Thomas Abernathy

    I am not using wordpress but I tried this in a text editor and in KompoZer. The boxes work great in I.E. 6 but nothing in firefox 2.0.0.7. Is there something else that should be done to get the textbox to show up in firefox?
    I am using the external style sheet.

    Thanks.

  5. Thomas Abernathy

    By the way it is showing up in firefox if I do it as inline. I am just hoping there is a way to do it externally.

    Thanks again.

  6. Thomas Abernathy

    I found the problem. Actually a markup validator found it. It seems firefox didn’t like the curly bracket between the .textbox entry and the next to last entry in my style sheet.
    I’ll be glad when I learn this stuff.

    Thanks anyway.

  7. Stephen Cronin Post author

    Hi Thomas,

    I’m glad you worked it out so quickly (before I could even respond!). It’s often the little things, like ‘punctuation’ that cause trouble. IE is more forgiving, but it’s better to get it right for the other browsers. It’s well worth learning the basics of CSS because you can do so much with it. Anyway, good luck!

  8. Thomas Abernathy

    Thank you.
    I was just getting the basics of HTML and have made a couple of websites on cd that I sent to my daughters to run locally. Now I find out about CSS. Now there are two markups I don’t know enough about.

    I am grateful that there are tutorials like this. I don’t plan on becoming and expert but with what I am learning I WILL be able to create a decent website.

    Thanks for the tutorials.

  9. Stephen Cronin Post author

    Hi Thomas, Sorry I’m so slow responding this week.

    Wait until you discover Javascript! 🙂

    Seriously HTML and CSS is great place to start. The thing is, you don’t need to know them both inside and out to create a decent website. Simply learn the basics, then if you have anything that you’re not sure how to do, use Google – there are loads of tutorials all around the Internet. If you want to make sure what you’ve done is correct, you can validate your HTML and your CSS.

    It may not be quite as simple as I make it sound, but the point is that the information is out there, and if you persist you’ll learn a lot. Anyway, good luck!

  10. Thomas

    Thanks Stephen,

    You are correct. The information is out there and I am learning. You are also right about not having to learn the stuff inside and out to build a decent site. I have mine up and running and I think it’s pretty good. I just wish I had known links in menus aren’t accessible to crawlers before I put those nifty menus on all my pages. Good thing I’m trying to figure out the site map thing.

    By the way if any of you get a chance check out http://alongtheway.110mb.com/

  11. Stephen Cronin Post author

    Hi Thomas,

    I’ve checked the site out and that’s good! The menus you’ve got at the moment should be fine. The links are there in the HTML – even there is some javascript involved, the bots will find the links as the <a href’s are there in the HTML. It should be fine.

    1. Thomas

      Thank you Stephen,

      I was hoping that would be the case. Since the menu links themselves are HTML and in the document and the javascript just handles the images, size and placement of the menu.
      I am so glad I am finding all this info. I started trying to make a website with a site builder online but it gave no control. Then I found kompozer but couldn’t position things how I wanted. Now that I have learned some things I do it all in notepad2. CSS is cool. Now I have control.
      I must again thank you and everyone else who takes the time to share this knowledge.

      1. Stephen Cronin Post author

        Thomas,

        Nice to hear from you again. I’m glad it’s going well. I used to use DreamWeaver, but I do everything in a text editor now for the reason you mention: control!

  12. debt advisor

    Another great tips!
    Using this box would add variety to my posts.

    What I often do to break the blandness of WP posts is just by inserting pictures between paragraphs.

    thank’s

    1. Stephen Cronin Post author

      debt advisor, that’s a good point. I do use text boxes sometimes to break up the text. It can make a real difference to a long post.

  13. Drunk Text

    Thanks for sharing this simple method of creating simple text boxes by just using some html tags and CSS.

    I personally prefer the first method using internal CSS as it’s far more easy to implement, even though you can’t just modify the look of the text box in all posts at once. It could potentially become an issue in the event you wish to change templates/themes.

    Have you ever notices some blog posts posting square 250*250 ads at the top of every post and the text just gets automatically arranged around it? Do you have some post or guide as to how I can implement that please. Not just to inset ads, even for inserting individual pictures for posts.

    Thanks

    1. Stephen Cronin Post author

      Hi Drunk Text,

      Inline CSS is certainly easier, but it’s better to go with the external one for the reasons mentioned. Of course if I ever finish my half written WordPress plugin, that will be better still! 🙂

      For the ads, I don’t have a guide on it, but they are probably just using CSS float. For example, add a style section to the img tag (or whatever tag you’re using), as such:

      <img style=”float: left;” src…

      That’s obviously not finished and you may also want to add other style attributes (such as margin etc), but that should get you the basic effect. You can use float:right instead of left if you want the image on the right hand side.

      Hope that helps.

  14. Drunk Text

    Hmm well I’ll check it out and see how I go, to tell you the truth I never tried using CSS to do it, I’ve tried doing it in HTML a while back using tables and putting the first paragraph of the post in a row with two columns one for the image and the other for the text.

    The only problem was that when the first paragraph was too long or too short (not the right number of lines) the layout was far from good looking.

    1. Stephen Cronin Post author

      Hi DT,

      example imageWith CSS, you may have a few issues with the layout being a little ugly because of the length of text, but it probably won’t be as bad as with Tables. Too short will probably be the same, but too long should wrap around the picture a little more nicely. I’m adding an example in this comment so you can see what it will look like. Note, if it is only a little too long, the wrapping may actually be ugly too!

  15. Thomas

    Hi Stephen,

    I was playing with this textbox on my website. I found that if I tried to add some things like headers or url the textbox would break. I see from your note about using div will not work for worpress but I found that for use on my website it works great.

    On a textbox I want to add certain styles or url I just replace p with div. This textbox just keeps getting better. I now have about 4 versions in my stylesheet.

    Thanks again and may God bless you,
    Thomas.

    1. Stephen Cronin Post author

      Hi Thomas,

      I have a feeling that there has been a change in the way that WordPress treats div tags – maybe in 2.3. I’m not really sure though. But if it works for you, great! I’m glad it’s working for you..

  16. Thomas Abernathy

    Sorry Stephen. I should clarify. I am doing this on a non wordpress site.
    I pointed out your note on div and wordpress so as not to make others think to try this in wordpress. I’m just using notepad2, filezilla, and a free server space.
    I originally found your article searching for a simple textbox. That’s what is nice about your suggestions. They can also apply to those learning html who don’t use wordpress. That is why I stumbled this article last night. Others could benefit from this as well.

  17. Derek

    Hi Stephen,I’ve tried your box solution but have run into a small problem.If you look at my homepage – http://www.fatburningreviews.com, you’ll see in the far right sidebar I’ve added two boxes.The bottom one connects to surveymonkey, and here your box solution works fine.But in the top box where I’ve inserted AWeberemail list subscription code, the box doesn’t seem to work – or at least intermittedly.Any idea?Thanks!

    1. Stephen Cronin Post author

      Hi Derek,

      I had a quick look and it seems that you’ve got a tags instead of p tags. I hope that helps..

  18. Bravo@Auto Insurance

    Hey Stephen this is a great tip and there are also alot of other websites out there that can teach you css is a very understandable way. Just search google for “css tricks” and you’ll get hundreds of beneficial websites. Also, check out youtube for css videos. You’ll be surprised at how many there are.

  19. justin @ freebie forum

    This is a good tip. I use boxes like these frequently on my blogs to make ‘calls-to-action’ stand out.

  20. Rado Hand@Pizza ovens building

    I just tried this in one test post both ways; one with the stile in and second in css file. It’s useful for showing code or edited/added content to a post etc. Because i will use the stiling decoration only at times (but with a few paragraphs in one larger block), I tried adding the css style right in html code and only to the particular article post and it worked fine or the styling can be added to the page of the page also, e.g.:

    .divtest {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 0 1em;
    margin: 1em 15 0;
    }

    Test text....
    .....
    .........
    .......
    .....
    etc.

    I hope the code above will show okay.

  21. Rado Hand

    Sorry, it didn’t show encasing opening and closing tags for:

    style type=”text/css” and after the stile code /style and h1, div’s, p’s, font.

    Basically all goes into the html in WP Tool when writing the article.

  22. Justin@PS3 for sale

    That my friend is some sexy CSS. I’m going to use this in conjunction with the rounded box tool to get some sexy results.

  23. dave@micr toner

    I’m still new to writing my own CSS for my sites, and this is one of those basic things I can start learning. Not gonna have time to learn it thoroughly, but little useful snippets like this is always useful, thanks.

  24. Mark@ed trial pack

    I am still new to writing my own styles for my sites, and this is one of those basic things I can start learning. Not gonna have time to learn it thoroughly, but little useful snippets like this is always useful, thanks.

    Sorry, I removed the link because it points to a pharmaceutical product…

  25. Tina@Atlanta Real Estate

    Thanks for the tip on inline css, I use a CMS and and can’t access the internal css files, so this makes it easy for me to add unique call-to-action boxes.

  26. tony@Best cheap web hosting.

    Nice work. If anyone ever needs this i am just going to send them to your post. You have some great step by step tutorials and links to other sites.

  27. Brian@Its Just Lunch

    It is also entertaining to note that we can modify or over-ride an external CSS style, through the in-line method. Just reference the class, they add some additional style. Here is an example.

    CSS file:
    .textbox {padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid}

    Code:
    p class=”textbox” style=”background-color: #CCCCCC;” text /p

  28. jim @ free vpn trial

    @Abdul the quicktags look scary at first but they aren’t too bad once you stop and think about it.

    Thanks for the great tips

  29. James@digital signage content

    Thanks – great post content! It seems like a more elegant way of emphasizing text than just ‘bolding’ it. I’m going to test it out on my blog later today!

  30. Taina P. @Sitegrinder

    This tip is really useful, and not to mention really easy. Back when I was just starting out to web design (I was scrawny, HTML-semi-literate kid of 11 then), I would’ve probaby made a bunch of graphics for the background and borders, and then proceed to code it in a complex way. That was before I discovered CSS.

    So up to now, I’m still amazed at the what CSS can achieve with minimal and simple coding. Thanks for this!

  31. Modern Day Peasant

    Thank you so much for putting this out there. This is very very useful information! I have bookmarked your site. I always wondered how people were able to do this. I have already added to some key places on my site. Works Great!

  32. Jay

    after hours of trying to find a plugin for this type of thing this page saved my life and two sites that needed this! great job!

  33. Jay

    The quicktags.js in wordpress 2.9.2 and 3.0 are all scrambled and like of locked like on a cheap free theme footer.php, your tut is going by older versions is there a new way to do this now? I am doing it with exterenal CSS but a pain adding it at every block and need a quicktag so my client can do it on his own later.

    1. Stephen Cronin Post author

      Hi Kevin,

      Your site seems to be working for me in Internet Explorer, Chrome and Firefox. The textbox shows for me in all three browsers. For the record, I’m using the latest version of Chrome (8.0.552.224) with no add-ons. I think that either it is a caching problem (ie your Chrome has your old css file cached and you need to Ctrl F5) or you have a Chrome add-on that’s causing a problem (unlikely, but could be possible). Can you try the Ctrl+F5?

      1. Kevin Kane

        Thanks Stephen.

        After I made the change and clicked on “Preview Post” in WordPress, I couldn’t see the text box.

        But then I refreshed the page and I saw it.

        I love these text boxes!

        Thank you. You’ve helped a lot of people.

  34. Donna Hulka

    Thank you so much for this! It’s been nearly six years since you posted this tip, yet it is still useful. I’m using it on my blog now. Much appreciated!

  35. Kiara

    I need to know how to add a text box and change the size, font color, and background color for the text box inside of my wordpress blog post. I’m not talking about a widget. I mean inside the blog post I have written I want a box with additional text in it. I have searched many different sites and tutorials. None of which have given me clear and concise steps on how to do this.

  36. Christian Nelson

    Thanks for this helpful post. You put this up here quite awhile ago, but I found it today just when I needed it. A complete and clear explanation. Thanks so much.

  37. Peter Nirchio

    Hi Stephen,
    Thanks for the code for my website. This fix to style.css works great for solid colored boxes. I have a picture background that I don’t want completely colored over by the box. Is there a way to modify the code to get 40% transparency?

  38. Myra

    Thanks for this helpful post. How do you create text box that has bold text and bullet points? I used your code in the text editor, but everytime I change the text in the visual editor it breaks the code. Thanks for your help.

  39. Toni Broome

    I’ve been looking for a way to do this without ANOTHER plugin to slow down my site for ages – an older post but still very useful. Thank you.

  40. James

    Thank you!
    This is exactly what I needed because I did not want to install YET ANOTHER PLUGIN that will slow down the site and cause conflicts, just to get a content box.
    Side note: why are there a million plugins when some simple code like this will suffice?

  41. Kelly Murphy

    I love your info but it didn’t work for the paragraph I wanted. It put the box only around half of my paragraph.
    see screen shot- the box stopped after a word that was followed by this:  
    Is that why?