Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 95c3bb8c25
Fetching contributors…

Cannot retrieve contributors at this time

file 233 lines (145 sloc) 18.362 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>A guide to the Grid Columns plugin</title>

<style type="text/css">html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;background:transparent;border:none;text-decoration:none}b,i,hr,u,center,menu,layer,s,strike,font,xmp{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;font-weight:normal;font-style:normal;background:transparent;border:none;text-decoration:none}font{color:#333}center{text-align:left}body{line-height:25px;font-family:Cambria,Georgia,Times,"Times New Roman",serif;color:#333;background:#fff}h1,h2,h3,h4,h5,h6{font-style:normal;font-weight:normal;margin:0 0 25px 0}h1{font-size:1.8em}h2{font-size:1.7em}h3{font-size:1.55em}h4{font-size:1.4em}h5{font-size:1.25em}h6{font-size:1.1em}p{margin:0 0 25px 0}ol,ul{list-style:none}ul{list-style:disc;margin:0 0 25px 2.5em}ol{list-style-type:decimal;margin:0 0 25px 3em}ol ol{list-style:upper-roman}ol ol ol{list-style:lower-roman}ol ol ol ol{list-style:upper-alpha}ol ol ol ol ol{list-style:lower-alpha}ul ul,ol ol,ul ol,ol ul{margin-bottom:0}dl{margin:0 0 25px 5px}dl dt{font-weight:bold;margin:10px 0 0 0}dl dd{margin:5px 0 0 1.5em}strong{font-weight:bold}strong strong{font-weight:normal}em,cite{font-style:italic}em em,cite cite{font-style:normal}abbr{cursor:help}acronym{text-transform:uppercase;border-bottom:1px dashed #666;cursor:help}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:baseline;position:relative;bottom:0.3em}sub{vertical-align:baseline;position:relative;top:0.3em}address{font-style:italic;margin:0 0 25px 0}li address,dd address{margin:0}blockquote{margin:0 25px;font-style:normal}blockquote em,blockquote cite{font-style:italic}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{cursor:pointer}a img{border:none}pre{overflow:auto;font:.9em Monaco,monospace,Courier,"Courier New";line-height:25px;margin-bottom:25px;padding:10px}code{font:.9em Monaco,monospace,Courier,"Courier New"}pre code{font-size:1em}ins,dfn{font-style:italic;text-decoration:none;border-bottom:1px solid #666}del{text-decoration:line-through}object{margin-bottom:25px}input,textarea{font-size:1em;font-family:Cambria,Georgia,Times,"Times New Roman",serif;padding:3px}:focus{outline:none}form label{cursor:pointer}option{padding:1px 2px}table{border-collapse:collapse;border-spacing:0;margin-bottom:25px}th,td{text-align:left}hr{margin-bottom:25px}img.wp-smiley{max-height:12px;margin:0;padding:0;border:none}.gallery{display:block;text-align:center;margin-bottom:25px !important}.alignleft,.left{float:left;margin-right:20px}.alignright,.right{float:right;margin-left:20px}.aligncenter,.center{display:block;margin:0 auto 25px auto}.alignnone,.block{clear:both;margin:0 0 25px 0}.clear{clear:both}img.alignleft,img.alignright{display:inline}body{width:750px;margin:36px auto 60px auto;font:15px/21px Arial,'Helvetica Neue',Helvetica,sans-serif;font:16px/25px Georgia,Times,'Times New Roman',serif}a:link,a:visited{color:#2f6eb9;text-decoration:none}a:hover,a:active{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:40px 0 30px 0;color:#000;font-weight:bold;font-family:Arial,sans-serif}h3{font-weight:normal;font-style:italic;font-family:Georgia,Times,'Times New Roman',serif}h1{margin-top:80px;font-size:2.2em}code{padding:0 3px;background:#eee}pre code{padding:0}pre{padding:9px;background:#eee;border:1px solid #ccc}ul{list-style:square}p.first{font-size:21px}p.second{font-size:15px}ul.space li{margin-bottom:10px}.section{overflow:hidden}.columns-2{float:left;width:350px;margin:0 0 21px 25px}.columns-3{float:left;width:230px;margin:0 0 21px 20px}.warning,.alert{padding:6px 9px;background:#fffbbc;border:1px solid #E6DB55}

.column-grid{clear:both}.column-grid:after{content:".";display:block;height:0;clear:both;visibility:hidden}.column{float:left;margin-right:5%}.column-first{}.column-last{float:right;margin-right:0}.column-grid-2 .column-span-2{width:100%}.column-grid-2 .column-span-1{width:47.5%}.column-grid-2 .column-push-1{margin-left:52.5%}.column-grid-3 .column-span-3{width:100%}.column-grid-3 .column-span-2{width:65%}.column-grid-3 .column-span-1{width:30%}.column-grid-3 .column-push-2{margin-left:70%}.column-grid-3 .column-push-1{margin-left:35%}.column-grid-4 .column-span-4{width:100%}.column-grid-4 .column-span-3{width:73.75%}.column-grid-4 .column-span-2{width:47.5%}.column-grid-4 .column-span-1{width:21.25%}.column-grid-4 .column-push-3{margin-left:78.75%}.column-grid-4 .column-push-2{margin-left:52.5%}.column-grid-4 .column-push-1{margin-left:26.25%}.column-grid-5 .column-span-5{width:100%}.column-grid-5 .column-span-4{width:79%}.column-grid-5 .column-span-3{width:58%}.column-grid-5 .column-span-2{width:37%}.column-grid-5 .column-span-1{width:16%}.column-grid-5 .column-push-4{margin-left:84%}.column-grid-5 .column-push-3{margin-left:63%}.column-grid-5 .column-push-2{margin-left:42%}.column-grid-5 .column-push-1{margin-left:21%}.column-grid-12 .column-span-12{width:100%}.column-grid-12 .column-span-11{width:91.25%}.column-grid-12 .column-span-10{width:82.5%}.column-grid-12 .column-span-9 {width:73.75%}.column-grid-12 .column-span-8 {width:65%}.column-grid-12 .column-span-7 {width:56.25%}.column-grid-12 .column-span-6 {width:47.5%}.column-grid-12 .column-span-5 {width:38.75%}.column-grid-12 .column-span-4 {width:30%}.column-grid-12 .column-span-3 {width:21.25%}.column-grid-12 .column-span-2 {width:12.5%}.column-grid-12 .column-span-1 {width:3.75%}.column-grid-12 .column-push-11{margin-left:96.25%}.column-grid-12 .column-push-10{margin-left:87.5%}.column-grid-12 .column-push-9 {margin-left:78.75%}.column-grid-12 .column-push-8 {margin-left:69%}.column-grid-12 .column-push-7 {margin-left:61.25%}.column-grid-12 .column-push-6 {margin-left:52.5%}.column-grid-12 .column-push-5 {margin-left:43.75%}.column-grid-12 .column-push-4 {margin-left:35%}.column-grid-12 .column-push-3 {margin-left:26.25%}.column-grid-12 .column-push-2 {margin-left:17.5%}.column-grid-12 .column-push-1 {margin-left:8.75%}

.column-grid { color: #c00; }

</style>

</head>
<body>

<h1>Grid Columns</h1>

<p class="first">Grid Columns was created because, frankly, I was tired of seeing theme developers add poorly coded shortcodes to their themes to handle this functionality. This plugin creates a <code>[column]</code> shortcode to address that issue.</p>

<h2>Table of Contents</h2>

<ul>
<li><a href="#install">How to install the plugin</a></li>
<li><a href="#how">How the plugin works</a></li>
<li><a href="#basic">Basic usage</a></li>
<li><a href="#advanced">Advanced usage</a></li>
<li><a href="#faq">Frequently-asked questions</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#copyright">Copyright and License</a></li>
</ul>

<h2 id="install">How to install the plugin</h2>

<ol>
<li>Uzip the <code>grid-columns.zip</code> folder.</li>
<li>Upload the <code>grid-columns</code> folder to your <code>/wp-content/plugins</code> directory.</li>
<li>In your WordPress dashboard, head over to the <em>Plugins</em> section.</li>
<li>Activate <em>Grid Columns</em>.</li>
</ol>

<h2 id="how">How does it work?</h2>

<p>The plugin provides you with a shortcode called <code>[column]</code>. It allows you to create columnized content.</p>

<h3>Some terms you should know</h3>

<ul>
<li><strong>grid:</strong> The overall container for your columns. A grid is made up of sections.</li>
<li><strong>section:</strong> The individual sections of a grid. For example, if the grid is equal to 4, it means there are 4 sections in the grid.</li>
<li><strong>column:</strong> A column goes inside of the grid. A column can span one or more sections of the grid. The number of columns cannot exceed the number of sections in the grid.</li>
</ul>

<h3>[column] shortcode arguments</h3>

<p>The <code>[column]</code> shortcode that takes in several arguments. The default arguments are the following.</p>

<pre><code>[column grid="4" span="1" push="0" class=""]...[/column]</code></pre>

<ul>
<li><strong>grid:</strong> This is the number of sections in the grid. You cannot use two different grids together. The allowed values for this argument are <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, and <code>12</code>.</li>
<li><strong>span:</strong> This is the number of sections you'd like the current column to span. Each instance of the <code>[column]</code> shortcode's spans must add up to equal the <code>grid</code> number.</li>
<li><strong>push:</strong> This is similar to <code>span</code>. This tells the script that you want to "push" this column over a specific number of sections. Basically, you're creating an empty space.</li>
<li><strong>class:</strong> This is for inputting a custom <abbr title="Cascading Style Sheets">CSS</abbr> class.</li>
</ul>

<h2 id="basic">Basic usage</h2>

<p>Once you've installed and activated the plugin, using it is pretty simple. You only need to wrap the <code>[column]</code> shortcode around some content that you want to columnize. Of course, you can only use shortcodes in shortcode-ready areas such as the post content area.</p>

<h3>Example #1</h3>

<p>By default, Grid Columns is set up to display 4 columns. Suppose you wanted to split your content into 4 columns/sections. You'd do so like this:</p>

<pre><code>[column]This is some very cool example content to use as an example.[/column]

[column]This is some very cool example content to use as an example.[/column]

[column]This is some very cool example content to use as an example.[/column]

[column]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-4">
<div class="column column-span-1 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #2</h3>

<p>Suppose you just wanted two columns. The following code would handle that.</p>

<pre><code>[column grid="2" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="2" span="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-2">
<div class="column column-span-1 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #3</h3>

<p>Let's do something a little more advanced. Suppose you wanted a 4-section grid with the first column taking up the space of two sections. Your code would look like the following:</p>

<pre><code>[column span="2"]This is some very cool example content to use as an example.[/column]

[column span="1"]This is some very cool example content to use as an example.[/column]

[column span="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-4">
<div class="column column-span-2 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<p>You probably noticed the <code>span="1"</code> and <code>span="2"</code> parts in the code. This represents the number of sections this particular column spans. So, if your grid is set up into 4 sections (default), you can only have a total span count of 4.</p>

<h3>Example #4</h3>

<p>Let's look at a slightly more advanced usage. Suppose you wanted a grid of 5 with first and last columns spanning 2/5 of the grid and the middle column spanning 1/5 of the grid. Your code would look like the following.</p>

<pre><code>[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="5" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-5">
<div class="column column-span-2 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h2 id="advanced">Advanced usage</h2>

<p>The following examples will just show you the code and output. You should understand the basic usage at this point.</p>

<h3>Example #5</h3>

<pre><code>[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="5" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="5" push="1" span="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<div class="column-grid column-grid-5">
<div class="column column-span-2 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-push-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #6</h3>

<pre><code>[column grid="12" span="6"]This is some very cool example content to use as an example.[/column]

[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]</code></pre>

<div class="column-grid column-grid-12">
<div class="column column-span-6 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #7</h3>

<pre><code>[column grid="3" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="3" span="1" push="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<div class="column-grid column-grid-3">
<div class="column column-span-1 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-push-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h2 id="faq">Frequently-asked questions</h2>

<h3>Help! My site's broken! What should I do?</h3>

<p>Most likely, it's because you either have too many spans or not enough spans for your grid. Make sure each <code>span</code> argument for your <code>[column]</code> shortcode equals exactly the <code>grid</code> argument.</p>

<h3>But, I did everything right.</h3>

<p>If you're absolutely sure you're math is correct, it could be a conflict with your theme. It'd be impossible for me to know without seeing it in use on your site, so you'll either need to ask on my support forums or get your theme developer to help.</p>

<h3>Can I have more than one set of grid columns in a post?</h3>

<p>Yes. Absolutely. Just make sure each grid has the correct number of columns before starting a new one.</p>

<h3>Can I nest columns?</h3>

<p>No. This is a limitation of WordPress.</p>

<h3>Can I use other shortcodes within the <code>[column]</code> shortcode?</h3>

<p>Yes, you can. However, keep in mind, that I can't guarantee that your plugin developer knows what he's doing and created his shortcode correctly. But, yes, you can do this with properly-coded shortcodes.</p>

<h3>Can I put content between two different column shortcodes?</h3>

<p>It's possible, but you'll probably break something. I recommend against attempting this.</p>

<h2 id="support">Plugin support</h2>

<p>I run a WordPress community called <a href="http://themehybrid.com" title="Theme Hybrid">Theme Hybrid</a>, which is where I fully support all of my WordPress projects, including plugins. You can sign up for an account to get plugin support for a small yearly fee ($29 <acronym title="United States Dollars">USD</acronym> at the time of writing).</p>

<p>I know. I know. You might not want to pay for support, but just consider it a donation to the project. To continue making cool, <acronym title="GNU General Public License">GPL</acronym>-licensed plugins and having the time to support them, I must pay the bills.</p>

<h2 id="copyright">Copyright and license</h2>

<p>Grid Columns is licensed under the <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html" title="GNU GPL">GNU General Public License</a>, version 2 (or later).</p>

<p>This plugin is copyrighted to <a href="http://justintadlock.com" title="Justin Tadlock">Justin Tadlock</a>.</p>

<p>2012 &copy; Justin Tadlock.</p>

</body>
</html>
Something went wrong with that request. Please try again.