WordPress How To Break Content Into Two Columns

So you want to design a WordPress theme or modify an existing theme to have your Post content to display as two columns much like printed newspapers and magazines? Well here’s an ingenious idea I learned from the Khoi Vinh’s and Allan Cole’s Basic Maths WordPress theme on how to do that. The beauty of this technique is that no JavaScript is required and everything is processed through WordPress and PHP so nothing can get blocked by security settings on a visitor’s browsers. This method also solves the problem with blogs that have non-technical writers who aren’t accustomed to using the HTML tab in the Post Editor or aren’t familiar with HTML markup and it allows writers to just write. So how do we do this:

basic-maths-wordpress-theme-2-column-sample

Directions

You will need a functions.php file in the theme template folder. If it already exists, open it. Otherwise, open you’re favorite HTML editor (I use Emerald Editor for the PC and TextWrangler for the Mac) and save the blank file as functions.php inside the WordPress theme template folder.

Open up the functions.php file and paste the code below anywhere inside the file. Be sure that you don’t accidentally place this function inside another function or you’ll get a blank screen when trying to load your website. If you’re new to the functions.php file, it may take some trial and error to get this right.

[sourcecode language=”PHP”]
// Page Paragraph column short code (http://basicmaths.subtraction.com/demo/)
// Right
function basic_rightcolumn($atts, $content = null) {
return ‘<div class="<span class=">rightcolumn">’ . $content . ‘</div>’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");

// Top
function basic_topcolumn($atts, $content = null) {
return ‘<div class="<span class=">topcolumn">’ . $content . ‘</div>’;
}
add_shortcode("topcolumn", "basic_topcolumn");

// Left
function basic_leftcolumn($atts, $content = null) {
return ‘<div class="<span class=">leftcolumn">’ . $content . ‘</div>’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

So what does all of this code do exactly? Let’s look at each part of code individually and the how to use it when writing Posts or Pages.

The first part of code:

[sourcecode language=”PHP”]
// Right
function basic_rightcolumn($atts, $content = null) {
return ‘<div class="<span class=">rightcolumn">’ . $content . ‘</div>’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");
[/sourcecode]

sets up a new WordPress Shortcode, [rightcolumn][/rightcolumn], that you can use in your Posts and Pages. So when you write a Post or Page and you enclose some text in the Shortcode, that will cause WordPress to wrap your text in HTML markup. For example, if I was to write:

[rightcolumn]This should appear in the right column.[/rightcolumn]

and then Publish the Post, looking at the source code of the published page, I should see:

<div class="rightcolumn"><p>This should appear in the right column.</p></div>

The second part of code:

[sourcecode language=”PHP”]
// Top
function basic_topcolumn($atts, $content = null) {
return ‘<div class="<span class=">topcolumn">’ . $content . ‘</div>’;
}
add_shortcode("topcolumn", "basic_topcolumn");
[/sourcecode]

sets up another new WordPress Shortcode,[topcolumn][/topcolumn], that maybe necessary depending on how your theme is laid out. The biggest advantage I see with the [topcolumn] is that you can use it right after the [leftcolumn] and [rightcolumn] to fix any CSS float issues.

The final part of code:

[sourcecode language=”PHP”]
// Left
function basic_leftcolumn($atts, $content = null) {
return ‘<div class="<span class=">leftcolumn">’ . $content . ‘</div>’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

adds <div class="leftcolumn"><p></p></div> to whatever is enclosed in the [leftcolumn][/leftcolumn] Shortcode.

Now you need to style those divs appropriately in order for the two columns to appear. This is what I use in my style sheet, but you mileage may vary:

[sourcecode language=”CSS”]
.entry .leftcolumn, .entry .rightcolumn {width: 50%; }
.entry .leftcolumn {float: left;  }
.entry .rightcolumn {float: right; }
.entry .leftcolumn p {padding-right: 0.5em; }
.entry .rightcolumn p {padding-left: 0.5em; }
.entry .topcolumn {clear: both; }
[/sourcecode]

Now to use this, you start a new Post or you can edit an existing Post, and decide where you want the 2-columns to appear and write:

[leftcolumn]This is the stuff that I'll be putting in my left column.[/leftcolumn]
[rightcolumn]This is the stuff that will go into the right column. Isn't it pretty?[/rightcolumn]
[topcolumn]This will span the entire width and be a normal one-column paragraph.[/topcolumn]

With the Shortcodes, you can put them next to each other or do a hard-return, it doesn’t matter. In actuality, the WordPress Visual Editor will probably move it all to one line. You can also put [rightcolumn] before the [leftcolumn] as the right column will always be right so long as you have the CSS correct.

wordpress-two-column-post-visual-editor-sample

The only thing you can’t do is something like this:

[leftcolumn]This is the stuff that I'll be putting in my left column.[/leftcolumn]
[topcolumn]This will span the entire width and be a normal one-column paragraph.[/topcolumn]
[rightcolumn]This is the stuff that will go into the right column. Isn't it pretty?[/rightcolumn]

as you’ll have some weird styling errors.

Example

[left-column]It wouldn’t be any good without a sample to show right? So if you copied the code and put it in the functions.php file correctly, then in the WordPress Post Editor, you should be able to use the new Shortcodes to create a two-column post article. Also don’t forget that you need to style the divs in-order for this to work properly.[/left-column] [right-column]If you notice that you still only have one-column, but no errors, check your source code for the chunk of code to see if it the Shortcode is being properly called. If it is, that means you’re missing the style information in the style sheet.[/right-column] [top-column]Here’s a wide column that returns to “normal” and spans the entire width. You don’t necessarily need to use the [topcolumn] Shortcode, but if you notice that your having design float issues, then you need to use the
[topcolumn] Shortcode on the paragraph immediately following the two columns. Make sure you have clear: both; entered into your style sheet under.topcolumn.

I would recommend doing this as good practice anyways; especially if one column is longer than the other column.[/top-column]

Conclusion

There are a number of ways you can accomplish two-column post layouts. There a number of jQuery techniques including this WordPress plugin that accomplishes the task but I’m a big fan of less. The less plugins you have to use, the faster your website will load. Also you want to make it as easy as possible for non-techie writers to be able to implement easily. One of the hardest part is to have the non-techie writer try to use the HTML Editor, see a garble of code, mess around and everything is screwed up. Extreme case, but it happens. With the use of WordPress Shortcodes, they can easily implement the feature from the Visual Editor and focus on writing.

Thank you to the Basic Maths WordPress Theme for the very useful code.

UPDATE (2010-05-17): Here’s a trick by WPRecipes.com on how to automatically output content into two columns using the functions.php for those who are looking for a method that doesn’t require users to remember code.

WordPress 2.6 and EXIF Extraction

I’ve been having this problem for a better part of almost two weeks now. I finally figured out the solution to the problem. With WordPress 2.6, one of the new built in features is the ability to extract EXIF data from a JPEG, store it in the database, and allow you to make a call for it. This is to complement the new built in gallery feature that was introduced in WordPress 2.5. Continue reading WordPress 2.6 and EXIF Extraction

MAMP: Mac, Apache, MySQL, PHP

Introduction

Before my friend introduced me to MAMP (Mac + Apache + MySQL + PHP), I wasn’t really able to do much web producing commuting to work. I was limited to making site mockups using Adobe Photoshop CS2 and some basic coding, but I couldn’t actually make the pages until I had internet connection so I could upload my test site to the sandbox.

Then came along MAMP, an all-in-one application for Mac OS X that allows you to locally host a web server! This was fantastic because now I can develop, hard code, check changes, and make all the changes I want without having an internet connection. It also lets me test run PHP codes or scripts that may be unstable and vulnerable without risking the web server.

How To Install

Installing and configuring MAMP is very, very easy.

  1. Download the latest copy of MAMP from the MAMP website. After it is done downloading, double click the downloaded file to unzip the contents.
  2. Drag the MAMP folder into the Applications folder.
    MAMP Install 02
  3. Once MAMP has completed copying into the Applications folder, you can find the executable at Applications>MAMP>MAMP.
    MAMP Install 03
  4. When you start it up, you’ll notice two things will appear: (1) the MAMP admin panel and (2) http://localhost:8888/MAMP/?language=English loaded into your default web browser.
  5. From the admin panel you can stop and start the Apache and MySQL servers.
    MAMP Install 04
  6. Your default web url is http://localhost:8888/ and your public folder is located (by default) at Applications>MAMP>htdocs. So anything that is placed within the htdocs folder will appear at http://localhost:8888/. Please note that this web address is local only and others will not be able to see it or the contents even if your computer is connected to the internet. I’ve seen where some people have mistakingly thought that MAMP can be used as a live web server. No, this was only designed to allow people to work locally.
  7. To change the default location of what folder will be the web folder, in MAMP, go to the menu bar and select Preferences and then select the Apache tab. Enter or select a new location.
    MAMP Install 05

Mac OS X: Installing WordPress on Tiger

Please note that I did not write this. This is reprinted from MacZealots written by Matt Willmore. The only thing that has been changed is formatting, all else is exactly as the author written. This is here for my personal reference.

Of the many options out there, many people choose to run their own blogging software as opposed to a managed service like Blogger or TypePad. On the software side, there are many decent tools available, such as Six Apart’s Movable Type (we have a tutorial for installing MT as well). WordPress is another mature, capable and free blogging engine that is very popular with many bloggers (like its founding developer, Matt Mullenweg) and rapidly gaining in popularity across the Web. WordPress is an excellent choice for a personal or professional blog, and the price is right, too. This tutorial will show you how to install WordPress 1.5.1.3 on OS X 10.4 Tiger.

Note: The most recent version of WordPress is 1.5.1.3, which contains a security patch among other improvements. This tutorial is fully compatible with the most recent version of WordPress. Version 1.5.1.3 is recommended for all WordPress users (upgrade instructions).

If you have installed another blog engine such as WordPress or Movable Type already, you may already have MySQL and/or PHP configured. If this is the case, you can skip right down to step 4.

Before we get started, let’s summarize what we’ll be going over in the installation:

  1. Downloading and Installing WordPress 1.5.1.3
  2. Enabling Personal Web Sharing
  3. Downloading and Installing MySQL
  4. Configuring MySQL
  5. Enabling and Testing PHP
  6. Configuring WordPress
  7. ???
  8. Profit!

Downloading and Installing WordPress 1.5.1.3

If we’re going to blog our way to stardom, we’ll need some blogging software, right? The first step we’ll take will be to download the latest stable version of WordPress, version 1.5.1.3. The compressed file should be about 250KB, and OS X will decompress it for you.

Once it’s decompressed, we’ll move the wordpress directory to OS X’s Web hosting directory in /Library/WebServer/Documents. By default, all requests for the domain’s root directory (like http://maczealots.com/) will go to this directory. This can be changed in Apache’s httpd.conf file, which we’ll cover later. If you like, you can also change the name of the wordpress directory to something else, like blog. This way the URL of the blog would change to http://www.yoursite.com/blog/ Additionally, if you want the blog itself to be at the root directory, delete all the items from the /Library/WebServer/Documents directory and move the contents of the wordpress directory to the now-empty Documents folder.

Enabling Personal Web Sharing

‘Personal Web Sharing’ (PWS) is Apple’s marketing name for Apache, the industrial-strength, tried-and-true Web server du jour. When you enable PWS, OS X starts up Apache, registers the modules, opens ports, etc. Since we’ll be serving the blog, we’ll need to have Apache running.

To enable Personal Web Sharing, open the Sharing preference pane in System Preferences. Check the box labeled ‘Personal Web Sharing’, and that’s it. (You may have to authenticate as an administrator before it will let you enable anything.) Go ahead and close System Preferences; you’re ready to install MySQL now.

Note: We are working on a version of this tutorial that includes the ability to host the database with SQLite, which is prepackaged in OS X 10.4. However, support for SQLite in WordPress is still being fully developed, so for now MySQL is still the way to go. If you’d like to see such an article, let us know.

Downloading and Installing MySQL

MySQL is the database backend that WordPress (and other blogging packages like Movable Type) can use to store blog entries, users, comments, etc. MySQL is free for personal use. First, download MySQL (4.0.24 at the time of publication). It will come as disk image with two packages and a readme. We will be installing both packages. First, open the main MySQL installer. It will install all the necessary components to run MySQL onto your OS X volume. After that installer has completed, run the startup item installer, which will automatically start up MySQL after any computer restarts.

Note: One of the most common problems reported is that people install MySQL 4.1 instead of 4.0. I can understand the desire to be on the bleeding edge of software, but WordPress (and most other blog/CMS engines) use an older authentication scheme that is incompatible with MySQL 4.1 and greater. There are hacks and workarounds out there, but for the easiest installation, stick to MySQL 4.0.

Configuring MySQL

Now that you have installed MySQL, let’s configure it so WordPress can access it. Open a new terminal session (found in /Applications/Utilities/Terminal.app) and type the following commands to navigate, make some changes, and start the MySQL daemon:

cd /usr/local/mysql sudo chown -R mysql data/ sudo echo sudo ./bin/mysqld_safe &

Next, let’s launch MySQL and use the test database (called test, even) to make sure everything’s running correctly:

/usr/local/mysql/bin/mysql test

If everything’s running correctly, you should see output similar to this:

Welcome to the MySQL monitor. Commands end with ; or g. Your MySQL connection id is 1 to server version 4.0.24-standard Type 'help;' or 'h' for help.  Type 'c' to clear the buffer. mysql>

Once you’ve verified that MySQL is running correctly, use the command quit to return to the console prompt.

Now that MySQL is running, we’ll change the root password of MySQL so that WordPress (and you) can access it later. Use this command (where yourpasswordhere is replaced by your chosen password):

/usr/local/mysql/bin/mysqladmin -u root password yourpasswordhere

The last thing we’ll have to do in MySQL is to create a table for WordPress to store its data. We’ll call it wordpress to keep things simple. To accomplish this, we’ll enter MySQL, create the table, and allow WordPress to edit it.

/usr/local/mysql/bin/mysql -u root -p CREATE DATABASE wordpress; quit

Enabling and Testing PHP

Now that MySQL is ready to go, let’s fire up PHP. OS X ships with PHP installed, but not activated. Fortunately, this is really easy to do. The only file we’ll need to edit is httpd.conf, which Apache uses for its configuration.

Open the config file in your favorite editor (I’ll be using pico):

sudo pico /etc/httpd/httpd.conf

Mosey on down to the Dynamic Shared Object (DSO) Support section. It’s the one with all the LoadModule listings. The one for PHP 4 is towards the bottom of that list. Look for the line and uncomment it to activate it. You can uncomment a line by removing the pound symbol (“#”) from the beginning of the line. The new line should look as such:

LoadModule php4_module

We’ll also need to uncomment the PHP 4 entry in the AddModule listings, so that it looks as such:

AddModule mod_php4.c

Once those two lines are edited you can save the httpd.conf file and quit the editor. Since we’ve edited Apache’s load setup, we need to restart Apache so it will recognize the changes:

sudo apachectl graceful

With that out of the way, let’s make sure that PHP is indeed running. Create a new text file in your favorite editor (stay away from RTF-happy TextEdit, though – SubEthaEdit gets my vote) and fill it with the following text:

<?php phpinfo(); ?>

Save the file as test.php in the root directory (/Library/WebServer/Documents/) and load the address of the page (usually http://localhost/test.php) into a Web browser. If PHP was correctly enabled, the phpinfo(); command should output page after page about the PHP installation. If not, retrace your steps – it can be easy to make a mistake.

Configuring WordPress

Now for the last step: configuring WordPress. First, you’ll need to edit WordPress’ default configuration file wp-config-sample.php. You’ll find it in the root folder of the WordPress installation. This is where you’ll set up the database information. Edit the following settings:

define(‘DB_NAME’, ‘wordpress’); – Change ‘wordpress’ to the name of the database you created in MySQL (in the example we named it wordpress). define(‘DB_USER’, ‘username’); – change ‘username’ to root. define(‘DB_PASSWORD’, ‘password’); – change ‘password’ to the MySQL password you chose.

Once you’ve made the changes, save the file as wp-config.php in the same directory and delete wp-config-sample.php.

Now, open a Web browser window and start the WordPress installer, found at http://localhost/blog/wp-admin/install.php. (Remember that if you chose to install WordPress in a different directory, such as the root directory, the address will be different for you.) WordPress will take you through the install process and set up the database with all the tables it needs to run.

After it completes, it will give you the login (admin) and password to log in to WordPress. The password is randomly generated and not recoverable so please write it down!

After you log in, there are two things you need to immediately do. First, change your password to something you can remember. You can find it in the Users tab of WordPress’ controls. Also, to avoid posting entries as “Administrator”, you can either create another account with a posting name, or simply enter a nickname in the admin account. But whatever you do, change the password and remember it, once you lose it, your data is hard to get back.

Now comes the moment you’ve been waiting for. Click ‘View site in WordPress’ controls or open a Web browser and go to http://localhost/blog and watch your blog appear! Roll up your sleeves, perfect the CSS, and wax poetic, serving it to the free world without spending a dime on extra software. Happy blogging!

Mac OS X: Setting Up Apache, MySQL, PHP and Mod_Rewrite

Please note that I did not write this. This is reprinted from TextDrive written by SuperJared. The only thing that has been changed is formating, all else is exactly as the author written. This is here for my personal reference.

Step 1: Enable Apache.

Go to System Preferences > Sharing and enable Personal Web Sharing. Verify that Apache has started by opening a browser and pointing it to http://localhost/.

Step 2: Install MySQL.

This is almost as easy as enabling Apache since MySQL has excellent support for Mac OS X.

Go to http://dev.mysql.com/downloads/ and pick out the latest OS X flavored package. Make sure to get the right one for your architecture. Mount the dmg and you should see two installer packages: one for the MySQL database, and the other installs the MySQL startup item.

The easiest thing to do is just run the standard installer for the database. It should be called something like mysql-standard-VERSION-apple-ETC.pkg. After that is installed, install the file MySQL.prefPane by double-clicking it. This is a panel in the System Preferences that allows you to start, stop and configure the database for automatic start.

Your database is installed. Look into the MySQL documentation if you want to secure it, because right now, the user name is root and there is no password.

Step 3: Install PHP.

Go to http://www.php.net/downloads.php and download the latest source version. You’ll want to put this in your directory (that’s my preference, at least), so open up a terminal:

cd /usr/local/src/ sudo fetch http://path/to/the/latest/download/from/php.net/ sudo tar zxvf php-VERSION-ETC.tar.gz cd php-VERSION

At this point you’re in the PHP source directory. We’ll now configure our PHP. NOTE: This example has the bare minimum of options to get this all working properly. See the PHP documentation for more configure options.

sudo make sudo make install sudo cp php.ini-dist /usr/local/lib/php.ini

Make sure to edit to your desired settings. Now we need to edit httpd.conf:

sudo open -a TextEdit /etc/httpd/httpd.conf

And make sure these lines are in their proper locations:

LoadModule php5_module libexec/libphp5.so # Should have been added already AddModule mod_php5.c # Should have been added already AddType application/x-httpd-php .php

Now restart Apache:

sudo apachectl graceful

And verify that the install worked by creating a file called test.php under your Sites directory (/Users/myusername/Sites/) with the following text:

<?php phpinfo(); ?>

Go to http://localhost/~myusername/test.php to verify that it worked.

Step 4: Enable mod_rewrite. (Optional)

Enabling mod_rewrite requires additional modification of the httpd.conf (and related) files so we can use .htaccess files.

sudo open -a TextEdit /etc/httpd/httpd.conf

Under this line:

<Directory "/Library/WebServer/Documents">

You’ll see:

AllowOverride None

Change this to:

AllowOverride All

You’ll also want to modify your user’s configuration file:

sudo open -a TextEdit /etc/httpd/users/myusername.conf

The Options directive must include FollowSymLinks, and the AllowOverride should be AuthConfig All. Example:

<Directory "/Users/myusername/Sites/"> Options Indexes MultiViews FollowSymLinks AllowOverride AuthConfig All Order allow,deny Allow from all </Directory>

Restart Apache and you’ll be able to use .htaccess files.