studionashvegas | design and social media

WordPress is, by far, one of the most versatile pieces of software out in cyberspace today. As a developer and designer, my first choice for any project, no matter the scope or purpose, is to see if it’s a job WordPress can handle.  9 times out of 10, it is.  People ask me how software can be so versatile, and how much work is involved to get it that way.  Honestly, it all boils down to the plugins you use, with a few special modifications here and there that most anyone can do.

This year, I’ve made it my mission to show people that WordPress can be used for, well, dang near anything!

Today was a whirlwind day at PodCampNashville.  There were so many great sessions, I saw a lot of great people, and we had a lot of fun at the after party. It’s too soon afterward to really digest things, so I leave you with my session (video is being re-encoded – will have it up ASAP)

Photo by Adria Richards

Holly is driving and I’m on the way back home from WordCampAtlanta (well, from staying in Montgomery with her family for a while) and I’m finally getting a chance to reflect and collect my thoughts and what I learned.  WCATL was a fantastic event, and with over 400 people there the number of people I met, saw, and interacted with is too many to put into one post (also, thanks again to everyone who dropped by my presentation – it was a good crowd and I’m glad to hear that you got something out of it!)

But, I’m the first to admit I learn something every time I head to a conference, and this time was no exception. Here are a few of the high points I learned from WordCampAtlanta:

1. WordPress 3.0 is going to be Killer!

Jane Wells (@JaneForShort) gave a fantastic presentation on the future of WordPress, and the future is looking awesome. From the WPMU + WP Merger to a new theme for 3.0, lots of exciting things are in the works.  Her slides are below:

2. The PHP and WordPress communities can learn a lot from each other.

@technosailor gave a fantastic presentation (re: lecture in a discussion-y way) on how the core communities of both the PHP world and the WordPress world could stand to play nicer to each other.  Personally, I think that the problem comes from WP people starting out in WordPress and learning PHP (top down) instead of learning PHP then jumping into WordPress (bottom up). 

3. People will do just about anything for a copy of “Crush It”.

‘Nuff said.

4. The more I talk about WordPress at a conference, the more I realize I know nothing about WordPress.

Getting to meet giants like John Saddington (@Human3rror), talking to Jane Wells, and hearing Mark Jaqueth (@markjaqueth) made me realize that not only do I still have a lot to learn, but by not helping to make WordPress better I am hurting the platform more than I am helping it.  I submitted my first patch to the TRAC, but that’s only a small step in making WordPress even better than it already is.

5. The Atlanta WordPress scene is hopping!

There are a lot of people in Atlanta who are passionate about WordPress, and the community there is fantastic (how could 400 people otherwise justify getting out in the ice and show to come to the SCAD to hear about WordPress, yes?).  I was glad to meet a lot of you, and I hope we can keep in touch.

When you’re working on a development site it’s hard to set things up correctly because you know you’re going to change the site, and putting in elements that are more than likely “stationary”, such as links, will have to be changed, and that causes un-necessary headache when it comes time to move the site live.  But, in the light of wanting to make your lives easier as a developer, there is a WordPress tag that can make your life much easier: ‘bloginfo’.  the ‘bloginfo’ tag can be given various arguments to make it bend to your will.  But, one of the most useful I’ve found:

<?php bloginfo(‘siteurl’); ?>

Instead of putting links in with just a leading slash (/about/), adding <?php bloginfo(‘siteurl’); ?> will automatically append the full site url before the sub-pages. Since most developers have their dev sites as a subfolder of a current site, this allows you to skip adding the development folder before each and every URL.  It’s also good for adding links into hardcoded content, such as graphical navigation, or specially coded front-page templates.

Example code:

<a href=”<?php bloginfo(‘siteurl’); ?>”>home</a>

this link will lead you to the home page.

<a href=”<?php bloginfo(‘siteurl’); ?>/about/”>about</a>

this link (if you have custom permalinks) will take you to the about page, no matter what website or server it’s hosted on.

OK… so let me say first off that it’s not totally my fault that I didn’t get to finish my session last week.  The internet access in the condo we were staying in was nothing less than horrible (it was a great condo otherwise, but let’s just say that if it was online it didn’t get done very fast).  Mount on top of that the fact the nearest Starbucks was 25 minutes in either direction and you have yourself a 100 percent valid excuse as to why I didn’t post last week.

Yeah… So… sorry about that.

At any rate, I’m back in the land of Wi-Fi with my in-laws in Alabama and wanted to continue the vacation atmosphere a little bit.  Therefore, the posting series will continue as warranted!

The last post was a sure-fire way to make sure your blog was up to date with the latest patches (which, before the post and during my vacation, I was victim of a useless [but still annoying] bug that caused my password to be able to be reset from anywhere).  Needless to say I upgraded as soon as I could.

Today I’m going to be talking about 3 plug-ins that rock my world – ones that go on 95% of every WordPress installation that I do.  Well, actually there’s at least 6 to 10, but this is the short list.  Also, there’s one I’ll be going in depth about – All In One SEO (but that’s another post altogether).

So, without further ado, let’s get to it! These plug-ins are in no particular order, so don’t think I’m playing favorites – they all serve their purpose!

Plugin 1: WP-GreetBox

WP-Greetbox is a fun little plugin that does what every good blog should: calls the user to a specific action.  But, it’s hard to call people to action when their situation (or referring website) is different.  WP-GreetBox fixes that problem by detecting the site a person comes from, acknowledging their visit, and giving them a specific call to action based on that referral.  Coming from digg?  “Digg this site!” Visiting from StumbleUpon? “Be awesome and click the thumb-up button on your way out!”  Coming from anywhere else?  “Hey, welcome, subscribe to the feed”.  You can see it in action on this very blog at the top if you’ve come from a referring site such as Twitter or Google.

Plugin 2: Redirection

This is one of those “plug-ins in disguise”.  It’s actually a 3-in-1 plug-in that serves many purposes.  It’s main purpose is to redirect permalinks from an old blog or to funnel traffic through to a mis-wired connection.  Example: You change your permalink structure but one post is still getting traffic to its old permalink, and it’s throwing a 404 error.  The plug-in will tell you its logging the 404 error and will allow you to set that permalink up to redirect to the right place.

Of course, this also means it’s a built-in URL shortner.

http://www.studionashvegas.com/twitter/ for example – click on it and see where it goes

Plugin 3: TweetMeme Button

TweetMeme’s retweet button is the new Digg button for blog posts.  It not only puts a really handy way to tweet out a site’s name and post link, but it shows you how many have been placed using said button (or any that turn up on the URL shortening service you set up).

So, you’ve decided you want to use WordPress and have selected a fantastic host.  Now comes the installation phase.  This is where a lot of people get frustrated. In all honesty, a lot of people never have to deal directly with web servers; they just deal with the front end (the web page), so it’s easy to get lost in the myriad of options and settings.  Let’s start with the manual installation, and we’ll work our way back to the one-touch installs offered by some hosts.

Manual Installation

In order to manually install WordPress onto a web server, there’s a few things you’ll need to have handy:

• MySQL Database Host (either an IP address or a URL that leads to the database)
• MySQL Username
• MySQL Password
• FTP Username
• FTP Password
• FTP Host

Let’s start with the MySQL.  Typically, you’ll be entering the database through PHPmyADMIN, which is a tool developed to access the back end of a SQL database. You may also use CPanel, which is an easy-to-use control panel for the back end of the webhost’s server.

If you use CPanel, you actually have a one-touch option of creating the first MYSQL username/password.  If you don’t, you’ll have to get that first user from the hosting company, or create it yourself.  Since every host is different, contact them to get the information you need.

More detailed MySQL information, and detailed instructions on installation, head to the WordPress official site: http://codex.wordpress.org/Installing_WordPress#Step_2:_Create_the_Database_and_a_User

As far as FTP information goes, 100% of the webhosts I’ve dealt with in the past have sent me an email with the FTP host on it.  typically, it’s your website’s url, but if you are working on a development server, that may be different.  Once again, check with your hosting provider to see what’s going on.

You’ll also need an FTP client, which is a “translator” between your PC/Mac and the Linux server.  I use FireFTP, which runs inside of the Firefox browser, but CuteFTP and SmartFTP are great choices as well.

Once you’ve gotten all the necessary information, it’s time to actually start getting WordPress installed.

Head over to http://www.wordpress.org and get the latest version of WordPress.  Put it on the desktop where you’ll remember where you saved it.

This is a screenshot of the inner workings of FireFTP.  Near the top left is a dropdown menu, and one of the options is to “create a new account”.

The window that pops up asks for your FTP username, password, and host name.  Enter those in and click OK.

You should connect successfully and see two lists of files.  The files on your computer (‘local’) are on the left and the server files are on your right.  Find the WordPress folder you just put on your desktop and navigate to the inside (Editors Note – this tutorial assumes you are installing WordPress in the main file structure.  If you are not, or if you want to install it to a different folder, simply put it where you want it).  Select all of the files and hit the [–>] arrow to begin the transfer.

Once all of the files have been transferred, navigate to http://www.YOURSITE.com/wp-admin/install.php.

After you hit the welcome screen, hit next, and start entering all of the information you’ve gathered:

As far as table prefix goes, leave it unless you know you need to change it.

If everything went OK, it should kick you to the next screen.  What you’ve just done is allowed WordPress to create a ‘wp-config.php’ file.  It controls every aspect of WordPress, and is the main file it goes to in order to validate settings.

And, you should get to this screen:

Enter your Blog’s title in and your email address.  For now, if you want to develop the site before Google gets to it, uncheck the box and click “Install WordPress”.

WordPress will give you a temporary password – copy it to your clipboard.  You’ll need it immediately.

Clicking on the login button will take you to the backend.

enter your username/password, and voila!  You’re in to your newly installed WordPress installation.

The Easy Way

I said all that to say this: GoDaddy, Dreamhost, MediaTemple, and many of the other hosts offer one of two ways to install WordPress automatically: 1) Fantastico (MediaTemple / CPanel) and 2) a one-touch system (Dreamhost / GoDaddy).  All you need to do is navigate to the right section, click the button, and voila! WordPress is installed for you.

Still, you never know when you’ll need to know the manual way, especially if you’re using a local host or an older host that doesn’t have the nice goodies attached.

Installing WordPress for the first time can be daunting, but once you’ve done it the first time, the rest becomes easier and you eliminate the risk for (many) errors.  Good luck in your installation, and tune in next time for another tutorial.  We’ll talk about the admin interface, and go over some of the more valuable features of the dashboard before we actually dive into the posting screen.

In our last session, we covered the basics on what WordPress is and why it’s better than your standard, run-of-the-mill static HTML site.  And now, you want to go out and switch every site you have to a dynamically driven platform.

Hold on there, turbo.  We still have a few things to go over.

For example, if you’ve had a static site on the same server for more than 5-6 years, you may be surprised to know that not all servers are running the latest and greatest technology.  Your server may not even have the right stuff to run WordPress.

There aren’t that many requirements, but you at least need to have the following items:

• PHP 4.3 or greater
• MySQL 4.0 or greater
• The mod_rewrite Apache module

I promised you this in English, so here’s a little more standard information on the server, breaking down the techno speak.

A server environment is either going to be Windows based or Linux based.  Typically, Windows servers are optimized to run .NET and ASP server languages.  I won’t go into detail on these two because they aren’t important to getting WordPress to run correctly – just know that if you see these on your server, there’s a chance it may not run WordPress.

On the other hand, an open source server setup usually consists of 4 components: a Linux Operating System, the APACHE server model, MySQL, and PHP.  If you ever hear a technogeek talking about “The Lamp Stack”, that’s what they are referring to.  This setup can run literally thousands of open-source software packages, and WordPress is definitely included in that list.

The ones we want to focus on are PHP (Personal Home Page) and MySQL (my structured query language, pronounced MY-SEA-QUILL), which are the primary components of how data goes from point A (the database) to point B (the page you bring up).

Basically, instead of content stored in the page, the content is stored by ID number in the database.  WordPress runs a query, which is a test run against the database to determine which content to pull (the default query is the last 10 posts, newest first).  If there are posts, it displays them.  If not, it shows an error message.

PHP4 will work, but PHP5 will allow you to use some of the latest plugins that have taken advantage of the new language. 

If you aren’t sure if your host has it, just send them an email asking them.  If they value your business you can either 1) get them to install it or 2) let you know how to take care of it on your end (if they allow you to).

If your host doesn’t support these technologies, or won’t help you, then here are some great alternatives.  These don’t have affiliate links; I recommend them out of the goodness of my heart, because they work.

GoDaddy

If web hosting is like real-estate, then this would be the college apartment.  It does the job, has a lot of cool features, but you never know who your neighbors will be (porn, spam, etc).  Most of the time that’s not an issue, but sometimes you will run into someone who’s made Google mad, and they take it out on the whole IP server.  However, I still use them for some sites, and it does work well.

MediaTemple

This is more like the condo of the web-hosting world.  It has great customer service, a really snappy interface, and lots of excellent features.  I’m actually switching over to them for most of my web-stuffs.

Next time, we’ll actually go through the install process, but for now, go out there and double check your hosts to see if they can support it.  If so, get it ready for Session 3, because that’s when the real fun starts!

Spend any copious amount of time on this site and you’ll see me talk about WordPress.  Spend any time in conversation with me, and WordPress will come up.  I have a WordPress sticker on my laptop and my Official WordPress iPhone Case is on its way to my doorstep as I type.

So, really, what is WordPress?  And why should you care about it?

This post is meant to be the first of a series dictating just how cool WordPress is, and why you should consider switching / converting your old, static HTML site over.

So, back to the question at hand… what is WordPress?

If you look at the WordPress.org site, here’s the official definition:

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time.

It’s pretty cryptic, but the next sentence explains it in a nutshell:

More simply, WordPress is what you use when you want to work with your blogging software, not fight it.

So, how is it different from a standard website?

In a standard website (.html based), a developer/designer creates a template shell, saves each individual page as a separate file, and uploads the content.  When an item needs to be changed, it has to be changed on the individual file and re-uploaded.  If you’re a small business with a small web-budget, you don’t have resources to have someone change a single word every time you need one changed.

WordPress does things differently. Instead of storing the content in files, it stores the content in a database.  The database is either stored on a different part of the server, or sometimes on a different server altogether.  Whereas a static page contains both structure and content, the WordPress theme envelops and wraps the content in the theme files – meaning you can change, edit, delete, and add new content using one set of template files.

OK, it seems cool, but is it for me?

Do you:

• Have a small 3-5 page site that you want to have more control over?
• Do you have content that changes on a regular basis (events calendar, etc.)
• Do you want to add a blog to an existing site?

Then YES, absolutely WordPress is for you.

Over the next few posts I’m going to be talking about hosting, installation,

A lot of people have commented on my new design how they love the comment bubble next to the post title.  It’s a great way to foster communication and showcase how many people are talking on your site.   So, if you want to add the same functionality to your site, here is the fastest way to do it!

First, you should note in your “index.php” file some code that looks something like this:

<h2 class="posttitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

To break that down, this is a H2 that inserts an automatic link to the post (<?php the_permalink() ?>) and automatically grabs the title from the post (<?php the_title(); ?>).

To put this in your own blog, ou can either start with your own comment bubble design or grab this one:

[link to comment bubble]

I’ve included the PSD so you can change the color as you need to.  You can either add in a background color or save it as a PNG file with transparency – it works either way. Save and upload your comment bubble (JPG, PNG, or GIF only!) either via FTP or the Media Uploader and save the hyperlink – you’ll need it in a second. Head into your theme editor and look for the above code.  Right above it, insert this code:

<div class="commentbubble"><?php comments_number('0', '1', '%'); ?> </div>

To clarify, this adds a div container with the “commentbubble” and inserts the code to call the comments.  The ‘%’ is a variable number that calls any number that’s not 0 or 1.

Finally, add the CSS into your stylesheet:

.commentbubble {
    background-image: url(URL-GOES-HERE);
    height: 37px;
    width: 49px;
    color: REPLACE WITH COLOR;
    font-size: 30px;
    text-align: center;
    padding-top: 5px;
    margin-right: 13px;
    float:left;

}

Save the edits, and preview.  It should put the comment bubble right next to the title.  If you are having trouble having your content text or pictures wrapping around the bubble with the title, right after the commentbubble div, put this code:

<div style=”clear:both”></div>

This is a clearing div that will stop the text-wrapping.

If you do like I do and schedule posts ahead of time (especially on the podcast), there’s a way inside of WordPress to show your readers what posts are coming up next:

<?php
$my_query = new WP_Query('post_status=future&order=DESC&showposts=5');
if ($my_query->have_posts()) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <?php the_date(); ?> - <?php the_title(); ?>
    <?php endwhile;
}
?>

This will display up to 5 “scheduled” posts wherever you drop in the code.  Add a headline <h2> tag if you want to give it a title (should you want to use it as a widget).

Want to see this code in action?  Check the WordPulse podcast page’s sidebar to see it working!