Getting a consistent, solid grid layout into WordPress can be a painless process if you use the right tools. In this tutorial, you will learn step by step how to quickly set up a grid system in WordPress that is very lightweight and easy to modify. We will keep the design simple so that we can focus on using the right tools to set up your grid, but keep in mind that you can style the grid on your own if needed.

I will be using a default Pool theme in WordPress for this tutorial just to show you a "start from scratch" approach to getting the grids just right.

Step 1: Determine Your Grid Width

Before getting started, you need to determine just how wide your grid will need to be. For my WordPress site, I can see that the width of my main column is 450px by using the Google Chrome’s " Inspect Element" feature when you right-click on an object. This is the fastest way I have found that can quickly determine the width and height of an object on a web page.

Step 2: Grid Designer

Instead of hand-building a grid, which you can do if you want, I suggest going with one of many available grid generator tools. For this tutorial, I will be using the grid generator by MindPlay. It’s a very simple and light grid generator.

I want a three-column display and I need to make sure my pixels are at 450. So adjust accordingly and skip to the "Export" tab. We will not be going over the *typography features in this tutorial, although this is certainly worth exploring on your own.

In the Export tab, use the top-most "Style Sheet" frame and scroll down until you see the "Grid" comment. You will copy everything from the comment to the bottom of this frame. It should only be about 30 lines of <pre>.

Step 3: Updating your WordPress Stylesheet

Login to your WordPress site and go to Appearance > Editor.

On the bottom-right of the Editor panel, you will see a Styles.css file (or something similar, depending upon your theme). Click this to open it up.

Scroll to the bottom of the sheet and paste your pre from MindPlay.dk:

Step 4: Implementing the Grid

To use the grid, you simply create a <div> with the class "grid". Each area of the grid is defined in the CSS. Open up a new page or post. Go to the HTML tab to start building your grid.

Here is some sample pre that you can paste into place to get you started:

  <div class="grid">  	<p class="grid-m1">&nbsp;</p>  	<p class="grid-c1">Left Column</p>  	<p class="grid-m2">&nbsp;</p>  	<p class="grid-c2">Middle Column</p>  	<p class="grid-m3">&nbsp;</p>  	<p class="grid-c3">Right Column</p>  	<p class="grid-m4">&nbsp;</p>  </div> 

Here’s what it looks like in WordPress:

Save/Update the page and look at the results. In my case, this is the home page for the site:

As you can see from the above screen shot, we have our three columns and everything is right where we expect it to be. You can add as many rows as you’d like by simply starting with the following <pre>:

  <div class="grid">    	<!-- Row #1 -->  	<p class="grid-m1"></p>  	<p class="grid-c1">Left Column</p>  	<p class="grid-m2"></p>  	<p class="grid-c2">Middle Column</p>  	<p class="grid-m3"></p>  	<p class="grid-c3">Right Column</p>  	<p class="grid-m4"></p>    	<!-- Row #2 -->  	<p class="grid-m1"></p>  	<p class="grid-c1">Left Row #2</p>  	<p class="grid-m2"></p>  	<p class="grid-c2">Middle Row #2</p>  	<p class="grid-m3"></p>  	<p class="grid-c3">Right Row #2</p>  	<p class="grid-m4">&nbsp;</p>    </div>

Here’s how it looks so far:

Now you can add images or text, and style each row exactly as you’d like.

Tips for Tweaking

You may have trouble in some browsers when you have more than one row. To get around this issue, you will need to make the margin on the far right (.grid-m4, in our case) to the height you want each row to be. If you are using images that are 250px by 250px, then make the row height in the .grid-m4 to be 250px:

.grid-m4 {  	float: left;  	width: 20px;  	height: 250px;  }

This will make sure your .grid-m1 on the left side of the next row doesn’t float up to the row above it.

If you want to style the background of the entire grid, you will need to adjust the height of the .grid class. So let’s say you have four rows on your grid, each at 250px. You will want to add height to the .grid class at 1000px so any styling elements you add will cover the entire grid design.

.grid {  	width: 450px;  	height: 1000px;  	margin: auto;  }

Depending upon the version of the MindPlay.dk grid generator you use, the site may not generate the ".grid-m4" and instead you will need to use .grid-m1 after .grid-c3 to ensure your grid extends to the proper place:

<div class="grid">  	<p class="grid-m1">&nbsp;</p>  	<p class="grid-c1">Left Column</p>  	<p class="grid-m2">&nbsp;</p>  	<p class="grid-c2">Middle Column</p>  	<p class="grid-m3">&nbsp;</p>  	<p class="grid-c3">Right Column</p>  	<p class="grid-m1">&nbsp;</p>  </div>

Final Results

Here’s what my final results look like with two rows and some simple graphics:

Have fun designing and remember that you can style your grid in any way you desire.

Related posts:

1. 35 Free and Professional-looking WordPress Themes
2. 6 Simple & Effective Ways to Speed Up Your Mac
3. 5 Simple Steps to Fight Spam
4. How to Ruin Good User Experience in 20 Simple Steps

Stressed out with too much unsolicited tagging by friends on Facebook? Granted that tagging is fun, but when your friends starts tagging your name in too many unrelated photos and videos, or just to get their photos or messages onto your Wall for your ring of friends to see, it starts to become rather annoying.

Of course, you can untag yourself, but in cases like these prevention is always better than constant untagging. There are unfortunately no way you can stop the tagging activities on Facebook, however there are ways to control how your tagged photos and videos will appear on your Facebook Timeline.

Recommended Reading: 5 Must-Know Facebook Timeline Tips/Tricks

1. Remove tags from Photos

First of all, you may have a number of unrelated photos already tagged to your Facebook profile. To remove this tag, simply open the photo from the album, hover the cursor over your name and click Remove tag.

If the link does not appear, you need to look for the link Options found at the bottom right of the photo, then select Remove Tag.

Then select the reason why you want to remove the tag and click Continue.

2. Unfollow updates from tagged photos

If you are fine with the tag, but prefer not to receive new updates of new comments or ‘Likes’, open the photo and click the Unfollow Post link just above the comment box.

3. Review tags from Friends before posting

As mentioned earlier, there is no way to stop any of your friends from tagging you on Facebook, but you can decide how the tagged photos and videos will appear on your Facebook Timeline. To control this, go to your Facebook Privacy Setting menu from the top right corner of your Facebook page.

In the Privacy Settings page, scroll down to the Timeline and Tagging section and click on Edit Settings.

A popup window will appear, click on the Review posts friends tag you.. section.

Click the drop-down menu to select Enable.

After selecting this option, every photo or video you are tagged in will be hold up for your review and approval before it gets posted on your Timeline. Take note that, according to Facebook, if you select this option, your friends can still tag you and the tags may appear elsewhere on Facebook, but not on your Timeline until you decide to approve it.

4. Control who see the photos you were tagged in

You can’t stop the tagging, but you can do the next best thing: control who sees the posts you’re tagged in, on Facebook, even when it is already posted on your Timeline. To control who can see your tagged photos and videos, again, go to the Privacy Settings page, scroll down to Timeline and Tagging then select Who can see posts…

In the next popup window, select who can see the posts you are tagged in from the dropdown menu Make this visible to. You can also Hide the posts from selected people or lists you already created on Facebook.

Once selected, click on Save Changes for the setting to take effect immediately.

Conclusion

There has yet to be a way to fully stop friends from tagging you. At best you get to review the tags as well as control who gets to see what you are tagged in. So what is your experience in controlling your photo tagging story? Do you have a better way? Do share.

Related posts:

1. How to View Facebook Photos, Pinterest Style [Quicktip]
2. How To Make Your Own Facebook Timeline Movie [Quicktip]
3. Drag-drop Facebook Friend List like Google+ Circles
4. How to Browse Your Facebook Like It’s Pinterest [Quicktip]