studionashvegas | design and social media

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.

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.

This post is part of the “Creating a WordPress Theme from a .PSD” series for designers to use for theme development. The other posts can be found here:

• Part 1 – Background / Introduction
• Part 2 – From .PSD to .HTML
• Part 3 – WordPress Structure
• Part 4 – The Header (header.php)
• Part 5 – The Footer (footer.php)

We’ve taken a look at one of the key files in the WordPress universe, the header, which kicks off everything else in a WordPress theme (including CSS, RSS, and all the other meta goodness). Now, going from beginning to end, we’ll explore the footer of a standard WordPress Theme. To be honest, a footer really only needs to have three elements:

1. the <?php wp_footer(); ?>
2. a </body> tag
3. an </html> tag

The first of those, the php function, serves the same purpose that <?php wp_header(); ?> does in the header – it serves as a hook for plugins and other WordPress functions that need to prophigate themselves in the footer. Think of it this way: if you were to install the Google Analytics plugin, how do you think it knows where to put the Analytic code? Answer: that php tag.

However, aside from those three lines, you can put anything else you want to show up under the sidebar and content. A lot of people add a second navigation to their footer (sometimes including other less-important site pages such as the privacy policy and legal information). The theme designer’s tagline/information can be found there too. And why not show your love to WordPress by including a statement saying that you are “Proudly Powered by WordPress”.

Widgets go great in a “footer-bar”. A great way to display them is to have three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in relatively short space.

Of course, there are fun footers too.  It’s your theme – do what you want with it!