1. Download and unzip the latest version of WordPress

Get it here: www.wordpress.org

2. Create a Database and User on your web server

Refer to the WordPress Docs for instructions on using cPanel, or if on a local test server, phpMyAdmin to create your database and user.

3. Edit the wp-config.php file

Chris Coyier has written a fabulous article detailing everything about editing and saving your wp-config file. Be sure to read it and follow all the steps. Here’s a quick recap:

• Rename wp-config-sample.php to wp-config.php
• Enter database credentials
• Enter unique secret keys and salts for security – via the WordPress.org secret key generator
• Change the database table prefix
• Extra tricks:
• Limit post revisions
• Set blog address and site address

4. Install WordPress by navigating to wp-admin/install.php

Be sure to change the default user name ‘admin’ to increase security.

5. Delete the install.php file

This is another way to boost security.

6. Protect important files and directories with .htaccess

Place this code in your site’s root .htaccess file:

# SECURE .HTACCESS
    <Files .htaccess>
     Order Allow,Deny
     Deny from all
    </Files>  

# SECURE WP-CONFIG
    <Files wp-config.php>
     Order Deny,Allow
     Deny from all
    </Files>  

# SECURE WP-ADMIN
<FilesMatch ".*">
 Order Deny,Allow
 Deny from all
 Allow from 123.456.789
</FilesMatch>

^Of course, you would change the IP address to your own in the above example.

7. Log into the dashboard and complete these settings:

a) User profile

b) Tagline

c) Time Zone

d) Writing, Reading, and Discussion (just look them over to make sure everything’s fine)

e) Change permalink structure

8. Activate Akismet or other spam protection

9. Install and configure SEO and Security Plugins

All in One SEO Pack is a great plugin for improving search engine optimization, as well as Google XML Sitemaps

Install these plugins for security monitoring (recommended by Chris Coyier, WordPress Security Lockdown

• WordPress File Monitor
• WP Security Scan
• Ultimate Security Check
• Secure WordPress

10. That’s it! Now you can start on the fun stuff. Good luck!

1. Web Design University

WebDesign.com has become one of my favorite sites for learning WordPress. What’s so great about it? Webinars and video courses! Add to that a great instructor, Benjamin Bradley, and a live webinar chat – and you have the makings of a great learning experience. WebDesign.com does have an annual membership fee, which I highly recommend purchasing if you are serious about WordPress. Still, the site offers free webinars on a regular basis. Here’s 2 that are coming up:

Friday, September 17th, 11am-Noon – Manipulating images and graphics with CSS

Monday, September 20th, 11am-Noon – Custom Post Types

Go to http://webdesign.com/events/ to learn more and register for a free webinar.

Members have access to all recorded webinars plus 60+ hours of instruction. Here’s a sample of the courses they offer:

• Web Design with WordPress
• Design Hacks Workshop & Course
• WordPress Developers Course
• Starting a Successful Freelance Web Design Business
• Project Managment for Web Design
• Blogging Your Way to Professional Success
• Web Design Business & Consultant Course
• Making Your Website a Marketing Hub

Be sure to check them out!

2. CSS-Tricks

CSS-Tricks.com is probably the #1 blog I frequent. As web development community headed by Chris Coyier, CSS-Tricks was instrumental in teaching me to make my first WordPress theme via screencast. The site currently lists 91 videos on various web design/development topics. In addition to the blog, there are some cool free downloads, tons of useful snippets of code, and an active forum community.

Here’s the latest screencasts:

#91: The WordPress Loop

#90: Simple TextMate Tips

#89: Organizing a Photoshop Document

3. Digging into WordPress

Digging into WordPress is a blog by Chris Coyier and Jeff Star, focusing exclusively on WordPress. It’s a companion site to their awesome new book by the same title. Get started learning WordPress here!

4. Sitepoint

I’m currently delving into Sitepoint‘s PHP Live course, and I’m enjoying every minute of it. The combination of video+articles makes learning fun and easy. In addition to several web development courses, they offer some really great books as well as a very nice reference for HTML, CSS, and Javascript. Don’t foget the blog and articles – they house a treasure full of information to help you become a better web developer.

5. W3Schools

And of course, I couldn’t go without mentioning W3Schools.com. This is the first site I came across back when I was learning HTML. W3Schools is full of tutorials on HTML, CSS, Javascript, PHP, and more. There’s a full reference for each language as well. What is neat about this site is the interactive examples provided throughout the tutorials that help you understand how the code works.

So take a look around at these sites and be prepared to learn something new!

This is a neat little plugin that lets you put several widgets in one widget area using tabs. I love tabs for organizing lots of content – it just looks neater and less cluttered. Tabber Widget is made by the awesome folks over at iThemes. You can download it from iThemes here, or just search for it under Add New plugins in the admin.

Features:

• Up to ten tabs in one widget area
• Four CSS styles to choose from, or create your own template
• Works in all browsers

Features of the menu system:

• Drag and drop interface
• Combines pages, categories, and links
• Easily re-ordered menu
• Sub menus
• Hide specific pages or categories

Here’s a snapshot of the menus panel:

Follow the steps below to make custom menus a part of your theme!

1. Register menus in your function.php file

Add this code at the bottom of your functions.php file, right before the ending ?>

if ( function_exists( 'register_nav_menus' ) ) {
  	register_nav_menus(
  		array(
  		  'primary_menu' => 'Primary Menu',
  		)
  	);
}

To add multiple menus, follow this pattern:

if ( function_exists( 'register_nav_menus' ) ) {
  	register_nav_menus(
  		array(
  		   'primary_menu' => 'Primary Menu',
  		   'sidebar_menu' => 'Sidebar Menu',
		   'footer_menu' => 'Footer Menu'
		)
  	);
}

2. Create a menu in the menu panel

Now the menus panel will appear under the Appearances tab on the WordPress dashboard.
Build and save a custom menu, giving it a name and including all the pages, categories, and posts you want in the menu.
To create a sub-menu item, drag and drop the item a little to the right of the previous item.
Once you have a menu saved, save it to a location under “Theme Locations”. These locations correspond with the menus you registered in functions.php

3. Insert the menu into your theme

Add this code to your theme file where you want the menu to appear:

<?php wp_nav_menu( array('menu' => 'Primary Menu' )); ?>

Replace “Primary Menu” with whatever you named the menu in the menus panel.

4. Enjoy your easy to manage menu system

Navigation changes will be a breeze from now on!

I’m using the free Titan theme, and I really like it. Only it has some footer problems.

How can I fix this?

1. I could write more about me. Just kidding! More content is not going to fix anything – it’ll just cover up the problem for a while.
2. I could set a minimum height for the content, so it is as long as the browser window. Nope. Browser window heights come in all sizes. The right height for one is wrong for another!
3. I could use a sticky footer. Of course! A footer that sticks at the bottom of the page no matter what the browser height or how little content there is. Perfect!

How a Sticky Footer Works

There’s more than one way to make a footer stick, but I’ve found that Ryan Fait’s Sticky Footer is one of the best. It’s fairly simple, and it works! Just a few lines of CSS code and some HTML, and you’ll have that footer tamed in no time.

It can be a little confusing at first, though. I’m going walk you through each part so you know how and why it works.

The Basic Idea

1. We are going to extend the content area to 100% of the browser window height, then put the footer below that. Yes, that will make the footer off the screen, and you would have to scroll down to see the footer.



2. Now we’re going to pull the footer up into place, but first we need a space to put it. We add an extra “push” div the same height as the footer before we end the content div so that the footer will have it’s own place and never overlap the content.



3. Finally we will set the negative bottom margin on the content that equals the height of the footer. This will draw the footer up into place at the bottom, like so.

The Code

Follow this structure in your HTML:

 <html>
     <body>
         <div class="wrapper">
             <p>Your website content here.</p>
             <div class="push"></div>
         </div>
         <div class="footer">
             <p>Copyright (c) 2008</p>
         </div>
     </body>
 </html>

All of your content except the footer needs to be in a wrapper div (You can name it whatever you like). I call mine sticky_footer_wrap so I know exactly what it’s there for. Make sure to include the “push” div at the very bottom of your content wrap, before you close it. If you don’t use it, your footer could overlap your content. Now add your footer div after the wrapper div. That’s it! Next is the css code.

Here is the CSS in full:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
.footer, .push {
height: 200px;
}

And here is the CSS code explained part by part:

* {
margin: 0;
}

This resets the margin to 0px on all elements. Often this is already included in a layout design, if you don’t have it in your stylesheet, then add it.

html, body {
height: 100%;
}

For the minimum height to work, all the parent elements of the wrapper div (html and body) must be set to 100% height.

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}

Here’s our content wrapper. We’re setting it’s min-height to 100%. The extra height rules are a necessary hack to work in IE 6. We’re using min-height because if we used only height, any content longer that that height would disappear! And we have our negative margin here: -200px is the bottom margin, while sides are auto margin and the top is 0. -200px is just an example size. Note: the negative margin must be the exact height of the footer. This means including any padding and borders. If you find that your footer is not quite up in place, check to see how much padding and borders are added and increase the negative margin by that amount.

.footer, .push {
height: 200px;
}

And last is the height for our footer and push div. Again, 200px is just an example – replace the footer height and the negative margin with your own measurements.

That’s the way it works! So get your HTML structure set up, add the CSS to your stylesheet, and try this out for yourself.
Happy coding!
~Hayley