Just found out today that I placed 5th place in the UGLY Website Contest. You can go over to Niki Brown’s blog to view the other winners.
My 5th place design can be seen here – the best part of which is the “Cat Dance” page inspired by Hamster Dance (does anyone remember that site?)
For making the 5th ugliest site on the internet I have won a copy of How to Be A Rockstar WordPress Designer from the lovely Collis at Envato, thanks Collis! I’m really excited to dig into the E-book and I’ll be sharing my review of it here for you guys! :)
It feels like February has been really hectic, so hectic that I can’t even think of anything that actually happened — does that make sense to anyone else but me?
Still hanging in there with the 365 project and its been awesome follow some of your 365’s on Flickr! Here are some of my fav shots from February, you can check out my complete collection here.
This is a collection of resources that helped me to learn Wordpress, I’ve tried to put some of the basic information here for easy access, but I also have included links to my many sources that will go into more detail on each subject. This post covers a lot of basics, but this post is intended for those of you who:
have a basic knowledge of CSS
at minimum, you know what PHP is and are willing to learn a little
understand the following terms: CSS, PHP, mysql, database, ftp, server, host, domain…
What do I need to get started?
Besides the obvious like, an internet connection and keyboard, here are a few things you’ll want to put in place before getting started that will make the process as simple as possible.
You’ll need a server to host your website files: to avoid possible headaches, i suggest hosting on a UNIX server, you will need both PHP and mysql capabilities.
Set up a domain and make sure the DNS points to where your site is being hosted. (if you purchased your hosting and domain together, this is most likely already set up for you and you don’t need worry about it.)
Create a mysql database on your server for your Wordpress installation.
If you do not have something installed already, you will need some sort of code editing software. There are a lot of options depending on your skill level, work style and operating system. For a larger list of wares, check out Smashing Magazines, CSS Editors Reviewed
The other piece of software you will need to install if you do not already have one is an FTP client, this will allow you to upload your files to your server.
Got all your prep work completed and your tools ready? Great! Now it’s time to get started…
How do I install Wordpress on my server?
Once you’ve extracted the Wordpress software download, open (in your editor) the wp-config-sample.php, input your mysql database information and then save the file as wp-config.php.
At the top of the file, you will see the following code, just plug in the database info as the comments instruct.
<?php
// ** MySQL settings ** //
define('DB_NAME', 'databasenamehere'); // The name of the database
define('DB_USER', 'usernamehere'); // Your MySQL username
define('DB_PASSWORD', 'passwordhere'); // ...and password
define('DB_HOST', 'localhost'); // 99% chance you won't need to change this value
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
In the 1% chance that you do need to change the default ‘localhost’ setting for the DB_HOST, it is usually something like mysql.yourdomainname.com.
Once the wp-config.php is saved, upload all of the files in the Wordpress folder onto your server. If you don’t want all those php files in your root directory, put them into a folder called something like “blog” or “site.” Once all the files have uploaded go to the address where your files live and simply follow the prompts to complete the install.
IMPORTANT: At the end of the install process you will receive a random password, this is not emailed to you so write it down, copy and paste it somewhere safe, take a screen capture, whatever you need to do, just make sure to make record of it before leaving that screen.
WordPress has been installed. Were you expecting more steps? Sorry to disappoint.
The easiest way to learn how to customize Wordpress themes is to start with an existing theme and modify it to fit your needs. After doing this, you will get more familiar with the way themes are set up and the capabilities, then starting a theme of your own from scratch won’t sound so overwhelming. Unless you are a CSS Ninja, and have some knowledge of Wordpress already (in which case, this post isn’t really for you) creating a custom theme from scratch is a huge undertaking, so start slow.
Check out the Wordpress theme library and find a theme that is close to what you would like. Pay attention to layout more than color as when you’re beginning changing the look of your Wordpress pages is going to be much easier that changing the format.
Before attempting to change anything, take a look at the style.css file and image folder first. By seeing the parts of the site that are images, you will already be able to see some very quick ways to personalize an existing theme. Changing a header image, and background image can give a theme a completely new look and will only take a short amount of time, and virtually zero “know how.”
Having trouble figuring out what id’s/classes relate to which parts of your theme? Try adding a bright colored background-color: to that element so that if stands out to you.
How do I change the link in the main navigation?
Most theme’s by default are set up to display all of your Wordpress pages in the main navigation, to change this, you’ll either be editing the header.php or sidebar.php file.
The header.php file holds your pages head tags, meta tags, links to style sheets etc. The area highlighted above in yellow shows the portion of the page that comes from the header.php file. If you wish to add in your own links to the header, just use HTML and add them into the header, then style appropriately. If you want your Wordpress pages displayed in the main navigation and this is not set up on your theme, you’ll only need a small chunk of code to make this happen.*
Pop this bit where you would like your navigation and style the “nav” element as you wish.
I want to use widgets in my sidebars, but they’re not “widget-ready.”
Widgets allow you to add all sorts of functionality to your Wordpress pages with out having to even even look at code, however in order to utilize them, your theme must be “widget-ready” meaning the pages sidebar must have a bit of code in it that says “this is where the widgets can go!” To make your pages widget ready you will need to edit both your sidebar.php file and your function.php file, and add the following…
Add to sidebars where widgets are to appear.* This code is for the first sidebar (1). Some themes have more than one widget-ready area of the page.
<ul class="sidebar_list">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1)) : ?>
<?php endif; ?>
</ul>
*Note that the element identifiers may vary from theme to theme.
Next you will need to be sure to update your function.php file. Again the number in parentheses refers to how many areas of the site are widget-ready.
<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
?>
How can I have more than one layout template on my Wordpress site?
The default page template for most themes is the index.php file, then there is usually an archive.php template and sometimes a links.php template. If you have multiple templates to choose from, you can change the template of any Page by specifying the new template in your Wordpress editor.
To create your own templates it just takes another small bit of code. Check out the video below and see how simple.
I love free things (doesn’t everyone?) The internet offers a slew of services for free that we’ve all come to love, while some, require you to shell out some coin.
These online services offer something that will make your life a little easier, for a price that isn’t free, but it’s well worth it.
Lynda.com – Over 25,000 video tutorials on the latest design softwares and web programming languages. You can pay by month for $25 or sign on for the whole year. Get a taste of what they have to offer with their 3,000+ free online tutorials, and the Lynda.com Podcast (click here to subscribe via iTunes.)
Freelance Switch: Job Board – Over the last few months, Freelance Switch has become my favorite blog. This site is a resource to any creative making their way through the freelance trenches. Amidst the gems of knowledge and support on the Switches (that’s what I like to call it.) you’ll find a blog, forums, podcast, resources pages and a job board with leads to all kinds of gigs. Freelance Switch tries a new approach for making a top-notch job board by allowing employers to post ads for free, and subscribers to the board pay just $7 per month to have full access to leads contact information. Even if you don’t land a job off this board, your supporting an awesome site that’s totally worth it.
Tubesnow.com – Get a 1GB account for free, which could be all you need. This service allows you to share content with others, no more large email attachments, no handing out your ftp login to clients.
Litmus - Just what they say, “painfully test your email and web designs.” This service allows you to test your web-based designs in a multitude of platforms and browsers, manage the results and even share those results in a comprehensive way to your client. With single-user web testing plans starting at nearly $60 per month, it ain’t cheap, but if you do a fair amount of web design or development this service could save you a ton of time and headaches. Not sure it’s for you? All accounts start with a free 30-Day Trial.
Word Press - Yes I know, Word Press is a free blogging service. They offer great tools, a clean and simple interface and a ton of templates, but if you want to make your blog your own, it’s worth the $15 fee to have full access to customize you CSS.
For making the 5th ugliest site on the internet I have won a copy of How to Be A Rockstar WordPress Designer from the lovely Collis at Envato, thanks Collis! I’m really excited to dig into the E-book and I’ll be sharing my review of it here for you guys! :)
The default page 
