Add Content Boxes to Individual Posts – No Coding, No Changing Stylesheets, No Changing Themes

 

 

Content boxes give you the flexibility to make each post different in design.  With content boxes added on a post-by-post basis, you can have a variety of  styles without complex themes or plugins.  You can simply add some “copy-and-paste” lines of code to the text editor of the WordPress and use the resulting template in the visual editor.

___________________

All of the content boxes here are responsive and should adapt to any size post column in your blog.  That said, it is best to read this article and apply the resources on a desktop or laptop computer.  Even though the content boxes can be used easily and effectively on most mobile devices, you will best understand them and this article by first seeing them in full size and resolution.

 

  As I mentioned in an earlier update to this blog, I like to vary the formatting of my posts.  I don’t have lots of time to code.  So, I’ve tried a number of plugins meant to help with the kind of formatting I want.  Many were supposed to help replace the formats for asides, image presentation, quotes, links and status updates that WordPress used to make available in its core.  And WP still makes gallery formatting available through the “add media” button in the editor.  But, I’m not satisfied with the plugins or the gallery function provided by WP.  Also, plugins take time to learn how to use.  (Did I mention I don’t have lots of extra time?) And then there’s the expense — the ones you prefer may turn out to be the pricey ones, rather than the free ones.

So, I’ve gone back to coding my own.  It’s actually faster.  Just a few lines of html styled with css can do a lot.  Furthermore, as I mentioned in the content box above, the code I’m going to share with you is designed to work in responsive themes. The css is inline rather than relying on stylesheets, so it should work fine in any theme and won’t change with updates to themes or WP. This article is a demo and how-to for you.  It’s a bit long.  Yet, all you will have to do is copy a bit of text, select the “text” tab in your WP editor, paste it in, hit the “visual” tab and you’re good to go. 

However, there is one change you may have to make.  The editor that comes with WordPress is called “TinyMCE.”  It’s a very good basic editor.  But its visual editor strips some html that it considers superfluous from the modifications (like content boxes) that you make in the “text” editor.  So, in order to make the content boxes look and work correctly, you’ll have to get “TinyMCE Advanced,” if you don’t already have it.  And you will have to use the settings tool to prevent that stripping.

Here’s how to get TinyMCE Advanced.  First, go to https://wordpress.org/plugins/tinymce-advanced/ , install it by whatever method you usually use with your WP and activate it.  If you do not know how to install plugins or themes, you need to learn that before you try adding content boxes to your posts.  You can do that at http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/.  I’m assuming that anyone interested in making their posts look more stylish has the basic skills of using WP.

As I illustrate in the image below, select “settings” from your sidebar and choose “TinyMCE Advanced.”  Your screen should look much like the image.  Find “Advanced Options” and check the box “Keep paragraph tags.”  Be sure to hit the “Save Changes” button before you exit the page.  I leave it to you to find out all the other lovely things you can do with TinyMCE Advanced, but I will say you’ll be pleased with how much more powerful your editor has become.  Of course, if you already do have TinyMCE Advanced, all you need to do is make sure the “Keep paragraph tags” box is checked.

 

 

The article is long because it gives you a whole bunch of content box designs. There’s not a lot of stuff to read — it’s primarily samples of the content boxes themselves and code snippets to copy and paste. Let me start a quick demo with content box examples and code first.  In the next section, after the boxes and code, you’ll find illustrated instructions for putting them in your posts.

 

Below are some very simple centered 50% sized content with white or subtly colored backgrounds. The code for each box appears directly below that box.

 

 

White centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text.  Click your cursor immediately above or below this box to type or place other content outside this box.

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; border: thin solid #dddddd; background-color: white; padding: 10px;”>
<p>White centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text.  Click your cursor immediately above or below this box to type or place other content outside this box.</p>
</div>
<p>&nbsp;</p>

 

Very light gray centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: #f5f5f5; border: thin solid #dddddd; padding: 10px;”>
<p>Very light gray centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p>
</div>
<p>&nbsp;</p>

 

 

Very light blue centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: #f0f8ff; border: thin solid #dddddd; padding: 10px;”><p>Very light blue centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Very light pink centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: mistyrose; border: thin solid #dddddd; padding: 10px;”><p>Very light pink centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Very light green centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: #f0fff0; border: thin solid #dddddd; padding: 10px;”><p>Very light green centered 50% content box. Very light gray border. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Here are the same content boxes as immediately above, but with an attention-getting thickly-stroked left border.

 

 

White centered 50% content box. Very light gray border. Gray left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; border: thin solid #dddddd; padding: 10px; border-left: 10px solid #dddddd;”>
<p>White centered 50% content box. Very light gray border. Gray left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p>
</div>
<p>&nbsp;</p>

 

 

Very light gray centered 50% content box. Very light gray border. Gray left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: #f5f5f5; border: thin solid #dddddd; padding: 10px; border-left: 10px solid #dddddd;”><p>Very light gray centered 50% content box. Very light gray border. Gray left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Very light blue centered 50% content box. Very light gray border. Blue left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: #f0f8ff; border: thin solid #dddddd; padding: 10px; border-left: 10px solid blue;”><p>Very light blue centered 50% content box. Very light gray border. Blue left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Light pink centered 50% content box. Very light gray border. Red left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: mistyrose; border: thin solid #dddddd; padding: 10px; border-left: 10px solid red;”><p>Light pink centered 50% content box. Very light gray border. Red left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Very light green centered 50% content box. Very light gray border. Green left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

<p>&nbsp;</p>
<div style=”margin: auto; width: 50%; background-color: #f0fff0; border: thin solid #dddddd; padding: 10px; border-left: 10px solid green;”><p>Very light green centered 50% content box. Very light gray border. Green left stroke. Select and erase the text in this box and and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Now, here’s how to get the code into your WP post editor.

 

 

  Select and copy the code for any one of the content boxes you see above.  Like this:

Open your WP post editor and select the “text tab.”  Click inside the editor window and paste the text.

 

 

Select the “visual” tab to return to your usual visual editor, and voila! — there is the box waiting for you to edit the text.  The further instructions for using the content box are actually written as content in the box itself. 

 

   

Next, let’s look at some content boxes that take the entire width of your post area.

 

 

 

The text boxes below are designed to fit the full width of your blog’s post content area. They are bordered and can have white or colored backgrounds. The first set of five have simple thin borders. The second set of five have an added attention-getting thick stroke before the text.  Many people use a full width box as the container for the entire post, but it is effective as a special content offset as well.

 

 

White content box light gray border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid #dddddd; background-color: white; padding: 10px;”><p>White content box light gray border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Very light gray content box light gray border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid #dddddd; background-color: #f5f5f5; padding: 10px;”><p>Very light gray content box light gray border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Pink content box red border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

Here’s the code for the box above:

 

<p>&nbsp;</p>
<div style=”border: thin solid red; background-color: pink; padding: 10px;”><p>Pink content box red border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Light green content box green border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid green; background-color: lightgreen; padding: 10px;”>
<p>Light green content box green border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p>
</div>
<p>&nbsp;</p>

 

 

Light blue content box blue border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid blue; background-color: lightblue; padding: 10px;”><p>Light blue content box blue border. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

 

White content box light gray border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid #dddddd; border-left: 10px solid #dddddd; background-color: white; padding: 10px;”><p>White content box light gray border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Gray content box light gray border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid #dddddd; border-left: 10px solid gray; background-color: #f5f5f5; padding: 10px;”><p>Gray content box light gray border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

 

Pink content box red border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid red; border-left: 10px solid red; background-color: pink; padding: 10px;”>
<p>Pink content box red border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p>
</div>
<p>&nbsp;</p>

 

 

Light green content box green border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid green; border-left: 10px solid green; background-color: lightgreen; padding: 10px;”><p>Light green content box green border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

Light blue content box blue border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: thin solid blue; border-left: 10px solid blue; background-color: lightblue; padding: 10px;”><p>Light blue content box blue border. Stroked left. Full width. Select and delete all this text and replace it with your image and/or text. Click your cursor immediately above or below this box to type or place other content outside this box.</p></div>
<p>&nbsp;</p>

 

 

And, here are a variety of fancier content boxes.

 

Here’s an example of a fancier centered 50% content box than the simple ones I showed you earlier. I think that if you get much more complicated, the design starts to distract from the content. We just want to call special attention to some content, not overwhelm with elaborate styling. (Actually, it’s a content box with three smaller content boxes inside it.) This is what the template looks like:

 

Header or Image Goes Here.

Content Goes Here.

Footer or Image Goes Here

 

  Here’s what it looks like with an image in the header box and text content in the rest.

Make Sure Ladybugs Are Part of Your Garden

This year protect your flowers from aphids. Ladybugs eat aphids and other critters you don’t want in your garden. They also help with pollination. They usually do no harm (there are some conditions where they can become pests, but those are uncommon) and they’re kind of cute.

Read more about gardens at http://yourgarden.cog

 

  (As you might guess, there is no yourgarden.cog website. It’s just demo text.) The code for the template box is:

 

<p>&nbsp;</p>
<div style=”border: thin solid #DCDCDC; padding: 4px; margin: auto; width: 50%; box-shadow: 5px 5px 10px #888888;”>
<div style=”border: thin solid #DCDCDC; padding: 2px; text-align: center;”>
<p>Header or Image Goes Here.</p>
</div>
<div style=”padding: 2px;”>
<p>Content Goes Here.</p>
</div>
<div style=”border: thin solid #DCDCDC; padding: 2px; text-align: center;”>
<p>Footer or Image Goes Here</p>
</div>
</div>
<p>&nbsp;</p>

 

 

The following three are content boxes meant for quotations.  Blockquotes are usually used for this, and you can certainly style a blockquote box the same way you can these content boxes. And, yes, you can style blockquotes differently for different posts.  But, as long as I was doing content boxes, I just wrote them this way for consistency.

 

 

This is some quoted text. Just select this text (but not the curly quote mark) and replace it with a nice quotation.

 

Here’s the code for the box above:  

  <p>&nbsp;</p>
<div style=”border: 1px solid gray; padding: 10px; background-color: white; margin: auto; width: 80%;”><p><span style=”font-family: times new roman,times,serif; font-size: 70pt; line-height: 1;”>“</span><span style=”font-size: 18pt;”><em>This is some quoted text. Just select this text (but not the curly quote mark) and replace it with a nice quotation.</em></span></p></div>
<p>&nbsp;</p>

 

 

This is some quoted text. Just select this text (but not the curly quote mark) and replace it with a nice quotation.

 

  Here’s the code for the box above:  

<p>&nbsp;</p>
<div style=”border: 1px solid gray; padding: 10px; background-color: #f0f8ff; margin: auto; width: 80%;”><p><span style=”font-family: times new roman,times,serif; font-size: 70pt; line-height: 1;”>“</span><span style=”font-size: 18pt;”><em>This is some quoted text. Just select this text (but not the curly quote mark) and replace it with a nice quotation.</em></span></p></div>
<p>&nbsp;</p>

 

 

This is some quoted text. Just select this text (but not the curly quote mark) and replace it with a nice quotation.

 

  Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: 1px solid gray; padding: 10px; background-color: white; margin: auto; width: 80%; box-shadow: 5px 5px 10px #888888;”>
<p><span style=”font-family: times new roman serif; font-size: 70pt; line-height: 1;”>“</span> <span style=”font-size: 18pt;”><em>This is some quoted text. Just select this text (but not the curly quote mark) and replace it with a nice quotation.</em></span></p>
</div>
<p>&nbsp;</p>

 

Oh, and just for fun, here’s a 50% centered simple box with shadow:  

 

This is a simple 50% centered content box with a shadow. Just select this text and replace it with an image or text or both.

 

Here’s the code for the box above:

<p>&nbsp;</p>
<div style=”border: 1px solid gray; padding: 10px; background-color: white; margin: auto; width: 50%; box-shadow: 5px 5px 10px #888888;”><p><em>This is a simple 50% centered content box with a shadow. Just select this text and replace it with an image or text or both.</em></p></div>
<p>&nbsp;</p>

Well, I did warn you it was a long article. Hope you can use the resources!