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).
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:
At the end of the text you want in the box, put this immediately after it:
As 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“.
Kristin
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!
Latest posts by Kristin (see all)
- Utilizing the Jetpack plugin: Site Verification - July 3, 2014
- Utilizing the Jetpack plugin: Updating to Jetpack 3.0.2 - June 20, 2014
- Utilizing the Jetpack plugin: Single Sign On - June 4, 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.
Thanks for the comment, Kiara — I’ll look into this for you!
Hi Kiara,
I apologize for the delay in getting back you — but I did find some answers to your questions:
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!
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!
Thank you for the note! Have you used these text boxes in your blog posts?