Building a Website The Easy Way With Wordpress

Building a Website
the easy way with

By James Tryon
Tuesday, January 26, 2010

What is WordPress

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.


A Little About
WordPress
Wordpress is used on
Millions of sites, and and is
seen by tens of millions of
people every day.

Wordpress was created by
and for the community.
Under the GNU General
Public License is a widely
used free software license


What do you need to
run wordpress?
1 - a web host
2 - you need a domain
3 - a little know how

PHP version 4.3 or greater
MySQL version 4.1.2 or greater


Big Names that use
WordPress
Nikon - Pepsi - Nokia
OnStar - Best Buy - Ford
Logitech - Samsung - GE
ebay - Xerox - PlayStation
The Wall Street Journal
yahoo - CNN - Wired


Cool Facts on
WordPress
Plugs
8,038/8,058/8,063

Downloads
71,388,637

Themes
1,111/1,114/1,114

Downloads
11,390,735


Flavors of WordPress

.COM

.COM | VIP


Making a Plan
• Website Host Requirements Checked and Verified
http://codex.wordpress.org/Hosting_WordPress

• Versions of PHP and MySQL Checked & Verified
http://codex.wordpress.org/Hosting_WordPress

• Web Host Compatibility with New Versions
http://codex.wordpress.org/Core_Update_Host_Compatibility
(stay away from godaddy - they over sell there servers and the bandwith
suffers)

• Your Website Username and Password


Famous 5-Minute Install
1 - Download and unzip the WordPress package, if you haven't already.
2 - Create a database for WordPress on your web server.
3 - Create a MySQL user who has all privileges for accessing and modifying it.
4 - Rename the wp-config-sample.php file to wp-config.php.
5 - Open wp-config.php in your favorite text editor and fill in your database details as explained in
Editing wp-config.php to generate and use your secret key password.
6 - Place the WordPress files in the desired location on your web server:

If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all
contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your
web server.

If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/
blog/), rename the directory wordpress to the name you'd like the subdirectory to have and move or upload it to
your web server. For example if you want the WordPress installation in a subdirectory called "blog", you should
rename the directory called "wordpress" to "blog" and upload it to the root directory of your web server.

Hint: If your FTP transfer is too slow read how to avoid FTPing at :
Step 1: Download and Extract.
Run the WordPress installation script by accessing wp-admin/install.php in your favorite web browser.

If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php

If you installed WordPress in its own subdirectory called blog, for example, you should visit:
http://example.com/blog/wp-admin/install.php

That's it! WordPress should now be installed.


Create your Data Base

Database Name: wordpress

Default character set: utf8

Default Collation: utf8_bin


Create your User

user name: wordpress_admin
host: localhost
password:
iE8-MQG1DRPIOeVDYYSk_EMRR5Rfu&7Y

conﬁrm password:
iE8-MQG1DRPIOeVDYYSk_EMRR5Rfu&7Y

http://www.sethcardoza.com/tools/random_password_generator/


Link your User
to the Data base

Just set the privileges for the user on the
database you created. I set it so the admin
can do anything to that data base.

Once you have everything uploaded to your server, simple to go the url


Oh No!
what do I do now?


We can do 3 things


We can do 3 things

• let wordpress do all the work


We can do 3 things

• Set up the wp-config.php your self


We can do 3 things

• Set up the wp-config.php your self
• We can stop here and go get a beer


We’ll Let WordPress
Give it a Try


Still have errors?


Still have errors?
Why do you hate me!


OK this is a easy fix


Are you sure your ready
for this?


First thing’s First,
lets change the
password to something
we can remember


I like "password"


lets take a look at our
new WordPress site


Yep - that’s good old
"Kubrick"
but it's still a blog


Time to start
customizing WordPress


Create a new user with
administrator rights


logout from your admin account
and login as that new user.


logout from your admin account
and login as that new user.

Then delete the old admin user
and all his posts and links.


WHAT!


It’s for Security

admin is to common and it is
the ﬁrst account hackers will try

Then delete all comments from
test user, post, links, and Blogroll


Now you have an almost
empty site to work on.


Lets start to go through
the settings tabs


General


All your basic stuff in here,
you can change it as you see
fit. I'm ok with it.


Writing


I never change anything on this page.

You can set it up to post via e-mail but why


Reading


Reading
• you can set the number of post that show up on the blog
home page

• you can also change the amount of post that show up in your
rss

• they even give you the option to change the rss feed from full
text to summary.

• this is were you change the settings for use a static page or a
blog page. (more lator)

• This option may not work if you use some premium themes
as they will use the file home.php for the Home page layout.
In those kind of themes you will find a separate template for
a blog page.


Discussion
• I never change any of these Settings
• To reflect the way you want to handle
comments, if you want to have people
commenting or not.
• For a static business website without a blog
you can disable commenting here. (I do
this on the Template level)


Media

• you can change the size of the images hear
but I would weight tell you have the design
done so you know what size to change the
sizes to


Privacy

• lets you pick if you want search engines see
your site.


Permalinks

• Pretty urls
• /%category%/%post_id%/%postname%/


Miscellaneous

• I leave this alone


Remove or rename the
default post category

• The standard post category in WordPress is
set to “Uncategorized” with the same for
the Slug.
• Set this to something that make since to
you and your site


Delete or rename default and
create new link categories

• The default for links in WordPress is
“Blogroll".
• I never use this part of wordpress.
• Never had a need


Install, Activate and
Configure Plugins
(most good plugins have very ugly sites)


First off Remove "Hello
Dolly" I really like Photo Matt
but this plug-in is just dumb


List of plugins we use
almost all the time
All in One SEO Pack
• http://wordpress.org/extend/plugins/all-in-one-seo-pack/ WP-DB-Backup
• http://semperfiwebdesign.com/portfolio/wordpress/wordpress-plugins/all-in-one- • http://wordpress.org/extend/plugins/wp-db-backup/
seo-pack/#more-59 • http://ilfilosofo.com/blog/wp-db-backup/
contact form 7 • backups should be done on the server, but this is also nice to have
• http://wordpress.org/extend/plugins/contact-form-7/ Favatars
• http://contactform7.com/ • http://wordpress.org/extend/plugins/favatars/
• Simple but flexible. Just another contact form plugin. • http://plugins.trac.wordpress.org/wiki/favatars
WordPress.com Stats • A system to show favicon.ico files as avatars: "Favatars". Entire recode by Jeff Minard
• http://wordpress.org/extend/plugins/stats/ (fixes for 2.5.x by Carlo Perassi). Previous Versions care of: Joen, Paul James, and
• Tracks views, post/page views, referrers, and clicks. Matthew.
• Requires a WordPress.com API key. WP Favicon
Google XML Sitemaps • http://wordpress.org/extend/plugins/wp-favicon/
• http://wordpress.org/extend/plugins/google-sitemap-generator/ • http://geekthegathering.com/wp-favicon-add-a-favicon-to-your-blog/
• http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps- • The "WP Favicon" plugin add a favicon to your site. Most of the themes just forgot to
generator/ manage this small but nice feature.
• This plugin will generate a special XML sitemap which will help search engines Feed Subscriber Stats
like Google, Yahoo, Bing and Ask.com to better index your blog. • http://wordpress.org/extend/plugins/feed-subscriber-stats/
Akismet • http://www.allancollins.net/368/feed-subscriber-stats-3/
• http://wordpress.org/extend/plugins/akismet/ • This plugin will show the number of subscribers according to FeedBurner.
• http://akismet.com/ Subscribe to Comments
• 14,163,866,845 spams caught so far • http://wordpress.org/extend/plugins/subscribe-to-comments/
10,256,853 so far today • http://txfx.net/wordpress-plugins/subscribe-to-comments/
83% of all comments are spam • Allows readers to receive notifications of new comments that are posted to an entry. Based
• (4pm on jan 21st 2010) on version 1 from Scriptygoddess
• Akismet checks your comments against the Akismet web service to see if they look Wickett Twitter Widget
like spam or not. You need a WordPress.com API key to use it. You can review the • http://wordpress.org/extend/plugins/wickett-twitter-widget/
spam it catches under "Comments." To show off your Akismet stats just put <?php • Display Tweets in the sidebar of your blog
akismet_counter(); ?> in your template. See also: WP Stats plugin. Yet Another Related Posts Plugin
Google Analytics for WordPress • http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/
• http://wordpress.org/extend/plugins/google-analytics-for-wordpress/ • http://mitcho.com/code/yarpp/
• http://yoast.com/wordpress/google-analytics/ • Returns a list of related entries based on a unique algorithm for display on your blog and
• This plugin makes it simple to add Google Analytics with extra search engines and RSS feeds. A templating feature allows customization of the display.
automatic clickout and download tracking to your WordPress blog. W3 Total Cache
pageMash • http://wordpress.org/extend/plugins/w3-total-cache/
• http://wordpress.org/extend/plugins/pagemash/ • http://www.w3-edge.com/wordpress-plugins/w3-total-cache/
• http://joelstarnes.co.uk/blog/pagemash/ • The fastest and most complete WordPress performance plugin. Dramatically improve the
speed user experience of your blog by adding: page caching, database caching, minify,
content delivery network (CDN) functionality and more...


Creating a Static Page

• Lets start by creating a basic page in
WordPress. We will call it home.


Install a new theme

• http://getk2.com/
• Supports Child themes
• http://code.google.com/p/kaytwo/w/list


Set up a child theme

• Create a new folder in the WordPress
themes folder (wp-content/themes/) to
contain your child theme files.
• For example: wp-content/themes/k2-
custom/


Create a style.css file with the
following content:
/*
Theme Name: your child theme name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: K2
*/

Note: Make absolutely sure whatever you have in Template: matches the folder
name that K2 resides in. This is case-sensitive. For example: if K2 resides in the
path wp-content/themes/kaytwo-1.0/, you would use: Template: kaytwo-1.0


A child theme needs

• style.css
• screenshot.jpg
• what ever files you want to overwrite


Working on creating a
Static home page
• Now that we have our child theme set up,
we can start to create our static pages.
• Copy page.php from your parent theme
and rename it to page-”your call”.php
• add the template tag to the top of the file
<?php
/*
Template Name: Home
*/
?>

Static home page

• Save all changes and upload
• Then go back to settings->Reading
• Change the radio button to static
• Pick your Pages


Static home page

• Next you can start to customized your
templates.
• This is almost plan HTML and CSS
• Some cases no HTML just CSS


Static home page

• Then your going to have to go to:
pages: edit
• Set your template
• Check out your hard work


Extra Folders

• I like to create basic folders in the root of
my site:
• js
• img
• flash


JavaScript Tricks
<script type="text/javascript">
jQuery(document).ready(function(){
      jQuery("#slider").easySlider({
           auto: false,
               continuous: true,
               nextId: "slider1next",
               prevId: "slider1prev"
          });
     });
</script>

The nice thing is wordpress comes with jQuery installed,
but you have to write it a little different.

The $ like most jQuery code needs to be switch with jQuery


Navigation
• combination of hard code
• wp_list_pages functions

• pageMash
• http://wordpress.org/extend/plugins/
pagemash/


API Key

• http://en.wordpress.com/api-keys/

• WordPress.com has what’s called “API keys” which
allow you to use services like Akismet and
WordPress.com Stats built on the WordPress.com
platform. This allows you to leverage the power of
WordPress.com while still hosting your blog
elsewhere.


How do I get a API key
• For Akismet users: They have free keys and
commercial keys available.

• For all other services: When you sign up for a
WordPress.com account we will email you an API
key. If you already have a WordPress.com account,
your API key is listed on your profile page, which
you can get to by clicking the “My Account” link in
the top left when you’re logged in.


Work Smarter not Harder
• Newsletter system - Mailchimp
Completely Free Account
Store up to 500 subscribers
Send up to 3,000 emails a month
http://www.mailchimp.com/
• Even works with eventbritehttp://
www.mailchimp.com/campaign/eventbrite/
home


How to Get Involved
with WordPress
IRC chats weekly for every flavor
http://webchat.freenode.net/?
channels=wordpress-ui

mailing list
http://codex.wordpress.org/Mailing_Lists

forums
http://wordpress.org/support/

wordcamps
http://central.wordcamp.org/


Building a Website The Easy Way With Wordpress

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Building a Website The Easy Way With Wordpress

Ähnlich wie Building a Website The Easy Way With Wordpress (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

Building a Website The Easy Way With Wordpress