• Getting started
• Connecting host & domain
• Installing WordPress
• The easy way
• The manual way
• Downloading Pro Framework
• Installing Pro Framework
• Upgrading Pro Framework
• Installing a Child Theme
• Installing a Plugin

• Adding a page
• Page layouts
• Adding content
• Adding links
• Adding headings
• Adding images
• SEO
• Publishing your page
• Making the homepage static
• Setting a page for latest posts (blog)
• Pages vs. Posts
• Using 'Post Lists'

• Adding a post
• Using excerpts
• Adding post images
• Set SEO friendly urls
• Navigation / Menus
• Site name / Tagline

• Adding samples/downloads
• Uploading a logo/header
• Making visual changes
• General options
• Easy Hook
• Shortcodes

• Resources

• Hosting
• Pro Framework
• Pro Framework Demo

Pro Framework & WordPress Guide

Written by Thomas Usborne

Getting started

The first thing anyone needs to do when they want to create a website is find a good host. It's important we choose a fast, reliable host with minimal limitations.

Hosting is becoming easier and easier for the average user. Many hosts will allow you to host unlimited websites just through your one account - usually for about $100 a year.

WordPress needs a couple things from the host it's on - if you choose a host from the link below, you'll be safe no matter what, but if you're curious, here's the requirements: http://wordpress.org/about/requirements/

Take a look at the "Resources" on this page for some safe hosts

Connecting your host and domain name

For minimal complication, I highly suggest registering your domain name with the same company you're hosting your website with. If you do this, they'll automatically connect your domain name and hosting account.

If your domain is registered through a different company than your hosting, you need to follow a couple simple steps.

Look at your domain name like clothes, while the host is your skin. Most hosting companies allow you to build a website without a domain name - you can usually see your website by going to what's called an "IP Address", followed by your username. For example, 162.111.78.1/~myusername.

Not very pretty, right? That's why we have domain names.

When you register with a host, they'll provide you with something called "nameservers" or "DNS servers". These are how you can connect your domain with your host.

Bluehost.com uses these nameservers:

NS1.BLUEHOST.COM
NS2.BLUEHOST.COM

Dreamhost.com uses these nameservers:

NS1.DREAMHOST.COM
NS2.DREAMHOST.COM
NS3.DREAMHOST.COM

These are very basic examples, but happen to be my two favorite hosts.

So what do we do with these nameservers?

Inside your control panel for your domain name, you'll find a section to specify custom nameservers. When you enter your host's nameservers, it pretty much lets the domain name know where to look. Changing nameservers can take up to 48 hours to propagate throughout the internet, but it can also take 10 minutes - so be patient.

Now that your domain name knows which company to point to, we have to tell your hosting account to look for that domain name.

If you set up the hosting account with the domain you just pointed to your host, then it will automatically connect the two, and you'll see a "splash page" provided by your hosting company when you type in your newly pointed URL (once it's propagated).

If your current hosting account is for another domain name, and your host allows multiple domains, then you can add your new domain name through the "Addon Domains" panel in your hosting control panel. This allows you to connect the domain to a specific folder on your server - allowing you to build multiple websites in multiple folders.

You'll know that your website is ready to be build when you see a "splash page" provided by your hosting company when you try and go to your domain name in a browser. If your host is Bluehost, you'll see a Bluehost page etc..

Installing WordPress

Installing WordPress (the easy way)

For general information on WordPress
http://codex.wordpress.org/Getting_Started_with_WordPress

Most current, popular hosts have an option to install WordPress in only a couple of clicks through something called "Fantastico". This is definitely how you want to do it - it really couldn't be any easier.

Bluehost
http://tutorials.bluehost.com/wordpress/

Hostgator
http://www.ehow.com/how_4698978_install-wordpress-hostgator-using-fantastico.html

Dreamhost
http://wiki.dreamhost.com/WordPress

GoDaddy
http://help.godaddy.com/article/834

If you're not using any of the hosting above, just do a quick search for "your hosting company + fantastico" or "your hosting company + one click wordpress install".

Installing WordPress (manually)

This is significantly harder than the methods above. I only recommend this for people who have general knowledge of how a website is stored and how to use FTPs.

Hostgator
http://www.hostgator.com/tutorials/wordpress/2.7/installing-wordpress-manually.htm

Further Help
http://www.how-towordpress.com/how-to-wordpress/how-to-install-wordpress/manually-install-wordpress/
http://www.howtogeek.com/howto/20859/install-wordpress-manually-on-your-website-using-cpanel-wizards/
http://fourblogger.com/how-to-install-wordpress-manually-on-your-server-without-fantastico/
http://readydesigns.com/2010/10/tutorial-installing-wordpress-on-godaddy-maunally/
http://rickbjarnason.com/installing-wordpress/
http://codex.wordpress.org/Installing_WordPress
http://www.youtube.com/results?search_query=installing+wordpress&aq=f
http://hubpages.com/hub/BlueHost-Tutorial-to-Install-Wordpress

If your host doesn't support the automatic installation of WordPress, then chances are it will have issues with WordPress itself - but just incase you want to manually install WordPress, here's the general steps.

1. Download WordPress to your computer by going to http://wordpress.org and clicking the Download button. Once downloaded, extract the "wordpress" folder to your computer.

2. Login to your hosting control panel, and create a new MySQL database. This will require you to come up with a unique database name, username and password. Take note of this information, as you'll need it later. You'll also need to take note of the host, which in most cases is just "localhost".

MySQL hosts from my experience

Bluehost: localhost

Hostgator: localhost

Dreamhost: mysql.yourdomainname.com

GoDaddy: randomly generated, you have to edit the details once the database is created to see the host name.

3. Now we need an FTP client, so we can transfer WordPress' files and folders from our computer, to your host. I suggest FileZilla, it's free! Be sure to download and install the client version, not the server version.

4. Now we need to connect to your website through FileZilla. Open it up and look for the "Quick Connect" bar at the top.

Host name: yourdomainname.com
User name: your hosting cpanel username
Password: your hosting cpanel password

Dreamhost creates different FTP details for you, they're emailed to you when you sign up.

5. Find your way to the "public_html" folder, which can also be seen as "www".

6. Now, you'll see your root directory of your website on the right side of FileZilla, and your computer's folders on the left. Find the "wordpress" folder you extracted in step 1 using the left side of FileZilla. Once you find it, go inside of the "wordpress" folder, you should see a bunch of files, and three folders named: wp-admin, wp-content and wp-includes. Select all, and drag these files and folders over to your "public_html" folder on the right side of FileZilla. This can take about 10 minutes, as there's a lot of files that make up WordPress.

7. Okay, so all of WordPress' files and folders have been uploaded to your website - now simply go to your domain inside of your favorite web browser. A button will appear asking you to "Create a configuration file" - click this button.

This is where we need our MySQL information we created in step 2. Simply fill out the input fields with the correct data, and run the install!

The default "Table Prefix" is wp_ - but to make your website less susceptible to hackers, I suggest changing it to something else, I've used "secure_".

Now fill out the options on the page, and install WordPress!

Notice how I have the "Allow my site to.." checkbox isn't checked? I do this when I start new websites so they aren't indexed right away - WordPress gets indexed in Google and other search engines super fast (which is awesome) - but sometimes we need some time to work with it. We can switch this back to allow search engines later by going to "Settings >> Privacy". (I'll show you).

After installing, you're ready to login!

Welcome to WordPress!

You can now login to your dashboard. Right click on the site title and open the link in a new window, so we can have your dashboard and website open at the same time.

Downloading & Installing Pro Framework

First, go to ProFramework.com and login to account. You'll see two download links - one of them titled "Pro Framework, and the other titled "Default Child Theme". Right click and save both files to a folder on your computer.

Now, let's install Pro Framework!

Here's a quick video:

Note: If you're installing Pro Framework in place of Freelancer Theme or another theme, you must reset your Theme Locations in "Appearance >> Menus" after installation and activation. The Theme Locations box is at the top left. Simply associate the Top (Primary) Navigation with your "Top" tab, and the Bottom Navigation with your "Bottom" tab.

Login to your WordPress dashboard and find your way to Appearance > Themes.

You'll see two tabs at the top - Manage Themes & Install Themes. Click Install Themes.

Now, directly under those two tabs you'll see a line of links - click the Upload (second) link.

First, we'll install the proframework_xx.zip package - but we won't activate it. Select proframework_xx.zip, and click "Open". Now click the "Install Now" button and let WordPress do it's thing.

We're not done yet! We don't want to activate the theme yet. We've only installed the Framework, now it's time to install the default child theme (proframework_child_xx.zip).

The reason for the child theme is so you can edit Pro Framework's CSS & functions without altering the framework. This allows me to release updates of the Framework - while leaving all of your customizations untouched. So go ahead and repeat the process above, but instead of installing proframework_xx.zip, install proframework_child_xx.zip.

Time to activate

So now you've uploaded proframework_child_xx.zip and the installer has done its thing, you click Activate.

Congratulations! You've successfully installed Pro Framework

Upgrading Pro Framework (the easy way)

You can see if a new version is available two different ways.

1. A yellow box instructing you to upgrade will show up on every page in your dashboard. It looks like this:

2. If, for some reason, the yellow announcement isn't showing up, but you think there's an update waiting, then go to "Appearance >> Themes" and look under "Pro Framework".

I suggest always checking out the details before updating - they can contain special instructions.

Upgrading Pro Framework (the harder way)

If for some reason you can't update Pro Framework using the easy method above, follow these instructions.

Basically, we need to delete the old version of the framework, and install the new framework.

This won't mess with your custom CSS or PHP edits, because you've had a child theme installed - and not the framework, riiiight? ;)

Right, so we go to "Appearance >> Themes" and look for your version of Pro Framework.



Find "Pro Framework" in your list of themes, and press the "Delete" link.

It will say you're going to lose your customizations - but if you've been using a child theme, you won't.

Now that it's deleted, go to "Install Themes >> Upload" and upload the new pro_framework.zip file.

There's no need to activate - as your child theme will kick back into place once the Framework is back.

Just in case - go to "Appearance >> Themes" and make sure the child theme is activated.

Installing a Child Theme

Installing a Plugin

There's two ways to install a plugin using WordPress. One of them is automatic, and the other involves downloading and uploading the plugin.

The Easy Way

If the plugin you wish to install is hosted on WordPress.org, you can simply go to "Plugins >> Add New" and type the name of the plugin into the search bar. Once you find the plugin, click "Install Now" and let WordPress install it. Once installed, click "Activate" and you're good to go!

The Harder Way

If the plugin requires you to download it and upload it, then follow these steps (it's not hard!)

1. Go to "Plugins >> Add New".
2. Click "Upload" near the top of the page.
3. Upload your plugin, which must be a .zip file.
4. Click "Install Now" and let WordPress do the installation.
5. Click "Activate" and you're all done!

Adding new pages to WordPress

First, let's create a homepage!

Navigate to "Pages".

Then, let's click on "Add New".

Now we can add our new homepage.

We can make the "Title" simply say "Home" - that way, we know which is our homepage when we're viewing all of our pages above. By default, if you title your page "Home", the headline on that page will say "Home" - but we can use Pro Framework's custom headline option to change this.

Page layout

You can specify a page layout to be used for each specific page or post. The default is a single right sidebar.

Adding content to our homepage

Important note: If you are going to be pasting content into your website through Word, or any other word processor (or another website), then you MUST paste your content into the "Text" tab.

When pasting into the Text editor, we can separate paragraphs by simply leaving a blank line in between them, like this.

Now that we have our content pasted into WordPress' Text editor, we can switch over to the "Visual" editor. Right away, you might notice the lack of visual options - don't worry, they're just hiding. You need to click the "Kitchen Sink" icon to show the rest of the visual options.

Adding a link

To link a word, simply highlight the word you want linked, and click the little chain-link icon in the Visual editor.

Now we simply enter the URL that we want to highlighted word to point to.

Once we click the chain-link icon, a small box will pop up, allowing us to enter a link. You can either input a custom URL, or you can link to existing content on your website.

Once you have entered your URL, simply click "Add Link".

Adding Headings

Let's add a couple headings now - these are important for breaking up content into sections.

Simply add your heading to a new line, and highlight it like so.

Now click on the "Paragraph" button in the editor - most people will have worked with something like this in a word processor.

From here, we can choose a heading 1, heading 2 and heading 3.

Now I'll give all three headings their appropriate tag.

Adding an image

Now we'll add an image to our content.

First, choose an insertion point inside of your content. I suggest choosing the very beginning of a line.

Now, we can press the "Select Files" button, which will open up a browser. Choose your image, and click open. Let WordPress do it's thing and upload the file.

Search Engine Optimization

You can specify search engine options on every page and post.

The Meta Title is one of the most important fields for SEO - when you search for something in Google, the titles that you see are the "Meta Titles".

Keywords are less important, and aren't even supported by Google anymore, but other search engines support them.

The Description is the snippet of text that appears under the meta title in search engine results. If you don't fill this out, Pro Framework will automatically grab the sentence of your content.

You can also hide the page or post from being indexed by search engines by checking the noindex box.

The nofollow checkbox makes it so search engines don't follow any links on that specific page or post.

Publishing a page

When your page is ready to be published, you can click the "Publish" button. You can choose whether to publish the page immediately, or you can schedule it to publish at a specific time on a specific date by clicking the "Edit" link next to "Publish Immediately".

.

 

Make your homepage static

You might notice your homepage has a "post" on it named "Hello World!". Let's go ahead and make your homepage a static page, instead of a blog.

We can do this now that we've created our homepage in the previous step.

Navigate to "Settings >> Reading".

After clicking on "Reading", you'll see something like this.

Notice how the "Front page displays" option is set to "Your latest posts"? This is why your homepage is showing your one and only post, "Hello world!". So, let's select the "A static page" option, and choose our newly created homepage as the "Front page".

Now, when we click "Save Changes", our homepage will replace the latest posts on our front page!

Setting a page for your latest posts

Since we're already in here, I'll explain how to set a page that will display every single "post" you make.

In many cases, this is considered a "blog". But I like to use posts to display many different things throughout the website. Using Pro Framework's Post Lists feature, you can add a new page, and tell it to display posts from certain categories. Meaning you can add posts to a "FAQs" category, and display them on a page by selecting the "FAQs" category inside of the Post Lists box. You can read more about Post Lists here.

If you want every single post you make to show up on one page, then we just need to do two small things.

1. Add a new page, simply title it "Blog" or whatever, and Publish. No need to include content, as it will be overwritten by the posts.

Now that we have a new blank page, we can go back to the "Settings >> Reading" page shown above.

We can now simply select our newly created page as the "Posts page".

We now have a page that will display every post you make!

Pages vs Posts

WordPress allows you add two different kinds of "content".

Pages are meant to be static information pages that won't be changing very often (except for the odd content change).

Example Pages
Homepage, About Us, Services, Contact Us etc..

Posts are meant to be put into "categories", they allow you to group content with other content, and easily add to each group whenever.

Example Categories
Blog, Recipes, Articles, Portfolio, FAQs, Tutorials, Tips, Events and so much more..

You can have a "Recipes" category, which you can add recipes to whenever you want. This groups the recipes together in the category, which we can them use on a page.

Using Pro Framework's 'Post Lists'

Using Pro Framework's 'Post Lists' feature, we can harness the power of categories, and display them on our pages.

Let's use categories and posts to create an 'Articles' page.

First, we'll create the 'Articles' category.

Once we click 'Add New Category', we can create our 'Articles' page.

Go to 'Pages >> Add New'.

We'll title it 'Articles'.

Remember from above, we can use the Custom page headline field to change the 'Articles' headline on our live page.

Let's publish and see what happens.

This is what a post list looks like by default. Let's change some options..

We'll tell the page to show the excerpt, and to display the posts in two columns. Let's take a look.

Adding posts

Let's go to 'Posts >> Add New' - I'm going to title my article 'One More Article'. Then I'll paste in some dummy content.

Now, the most important part, we have to add our new article to the 'Articles' category, so it will display on our "Articles" page.

Let's take a look.

This will now show up on our 'Articles' page, and if you have a page configured to show all posts (blog), it will show up there.

Using Excerpts

Adding post images

We can spice up our excerpts a little using post images.

Let's start off by clicking 'Upload Image'. This will open a box with a button allowing us to select files.

Then, we select our file, and open it.

This will now upload to your website, give it a second, and a box will open up. Now, simply click "Insert into post".

The image URL will now be sent to your post image field. There's many other options to choose from as well.

Now, we can publish the post.

I'll do the same to the other post, just for visual purposes ; )

Settings search engine friendly links (WordPress Permalinks)

WordPress allows you to easily make your URLs search engine, and human friendly. By default, WordPress will make your URL look somewhat like this:

http://yourdomainname.com/?page_id=18

By switching the permalinks, we can get something like this:

http://yourdomainname.com/my-page-title

More keywords for search engines, and easier to remember for humans!

WordPress Navigation / Menus

Let's now take a look at how to control our main (top) navigation, and our bottom navigation.

Changing your site name / tagline

If you don't have a logo or a header, then you might want to change the site name and tagline that show up. First, let's go to "Settings >> General".

The first two options on the page are for your site name and tagline.

Change these two settings, and click save - then you're good to go!

Adding Samples & Downloads

From 8:17 to 10:15

Uploading your logo or header 

Simple header customization

Advanced header customization

Making visual changes

See some screenshots of all of our Visual Options

From 1:20 to 4:51

General Options

See some screenshots of all our General Options

Using Easy Hook

See some screenshots of all our Easy Hook options

Pro Framework's Shortcodes

Pro Framework comes with some pretty awesome shortcodes, which make is easy for you to add stylish buttons, separators, toggling text (appear on click), colored boxes, and last but certainly not least, multiple columns inside of your content.

See shortcodes documentation

Resources

Hosting

Note: These are affiliate links, but I have tried and support all of the below companies.

Pro Framework

All content on this page is property of Thomas Usborne - it may not be taken off of this page without my consent.