SlideShare a Scribd company logo
1 of 121
Download to read offline
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.




Tuesday, January 26, 2010
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

Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
Flavors of WordPress


                              .COM


                              .COM | VIP




Tuesday, January 26, 2010
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


Tuesday, January 26, 2010
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.


Tuesday, January 26, 2010
Create your Data Base

           Database Name: wordpress

           Default character set: utf8

           Default Collation: utf8_bin




Tuesday, January 26, 2010
Create your User

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

           confirm password:
           iE8-MQG1DRPIOeVDYYSk_EMRR5Rfu&7Y

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




Tuesday, January 26, 2010
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


Tuesday, January 26, 2010
Tuesday, January 26, 2010
Oh No!
                            what do I do now?


Tuesday, January 26, 2010
We can do 3 things




Tuesday, January 26, 2010
We can do 3 things

                    •       let wordpress do all the work




Tuesday, January 26, 2010
We can do 3 things

                    •       let wordpress do all the work
                    •       Set up the wp-config.php your self




Tuesday, January 26, 2010
We can do 3 things

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




Tuesday, January 26, 2010
We’ll Let WordPress
                                Give it a Try


Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Still have errors?




Tuesday, January 26, 2010
Still have errors?
                            Why do you hate me!


Tuesday, January 26, 2010
OK this is a easy fix



Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Are you sure your ready
                       for this?


Tuesday, January 26, 2010
Tuesday, January 26, 2010
First thing’s First,
                      lets change the
                  password to something
                    we can remember

Tuesday, January 26, 2010
I like "password"



Tuesday, January 26, 2010
Tuesday, January 26, 2010
lets take a look at our
                        new WordPress site


Tuesday, January 26, 2010
Tuesday, January 26, 2010
Yep - that’s good old
                                 "Kubrick"
                             but it's still a blog


Tuesday, January 26, 2010
Time to start
                 customizing WordPress


Tuesday, January 26, 2010
Create a new user with
                   administrator rights


Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
logout from your admin account
             and login as that new user.




Tuesday, January 26, 2010
logout from your admin account
             and login as that new user.

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


Tuesday, January 26, 2010
WHAT!



Tuesday, January 26, 2010
It’s for Security


           admin is to common and it is
           the first account hackers will try

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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Now you have an almost
                  empty site to work on. 



Tuesday, January 26, 2010
Tuesday, January 26, 2010
Lets start to go through
                    the settings tabs


Tuesday, January 26, 2010
General



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



Tuesday, January 26, 2010
Writing



Tuesday, January 26, 2010
Tuesday, January 26, 2010
I never change anything on this page.

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




Tuesday, January 26, 2010
Reading



Tuesday, January 26, 2010
Tuesday, January 26, 2010
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.


Tuesday, January 26, 2010
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)


Tuesday, January 26, 2010
Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Privacy


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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Permalinks


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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Miscellaneous

                    •       I leave this alone




Tuesday, January 26, 2010
Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Install, Activate and
                             Configure Plugins
                            (most good plugins have very ugly sites)




Tuesday, January 26, 2010
Tuesday, January 26, 2010
First off Remove "Hello
                 Dolly" I really like Photo Matt
                 but this plug-in is just dumb



Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
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...



Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Creating a Static Page



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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Install a new theme 

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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
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/




Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
A child theme needs

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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
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
                            */
                            ?>
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Working on creating a
                              Static home page

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



Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Working on creating a
                              Static home page

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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Working on creating a
                              Static home page

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




Tuesday, January 26, 2010
Tuesday, January 26, 2010
Tuesday, January 26, 2010
Extra Folders

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



Tuesday, January 26, 2010
Tuesday, January 26, 2010
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




Tuesday, January 26, 2010
Navigation
                    •       combination of hard code 
                    •       wp_list_pages functions


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


Tuesday, January 26, 2010
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.




Tuesday, January 26, 2010
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.



Tuesday, January 26, 2010
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


Tuesday, January 26, 2010
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/



Tuesday, January 26, 2010

More Related Content

Viewers also liked

Viewers also liked (17)

WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 
Riding The Crazyhorse: Future Generation WordPress
Riding The Crazyhorse: Future Generation WordPressRiding The Crazyhorse: Future Generation WordPress
Riding The Crazyhorse: Future Generation WordPress
 
Creating a WordPress Website that Works from the Start
Creating a WordPress Website that Works from the StartCreating a WordPress Website that Works from the Start
Creating a WordPress Website that Works from the Start
 
Jeff Channell - Secure PHP Coding Practices
Jeff Channell - Secure PHP Coding PracticesJeff Channell - Secure PHP Coding Practices
Jeff Channell - Secure PHP Coding Practices
 
What's New in WordPress 3.6 - BarCamp Orlando 2013
What's New in WordPress 3.6 - BarCamp Orlando 2013What's New in WordPress 3.6 - BarCamp Orlando 2013
What's New in WordPress 3.6 - BarCamp Orlando 2013
 
Website Builder Start-Up Guide
Website Builder Start-Up GuideWebsite Builder Start-Up Guide
Website Builder Start-Up Guide
 
Discapacidad intelectual. declaración de alcalá.
Discapacidad intelectual. declaración de alcalá.Discapacidad intelectual. declaración de alcalá.
Discapacidad intelectual. declaración de alcalá.
 
WordPress Use Cases - Wordpress Can Do Anything
WordPress Use Cases - Wordpress Can Do AnythingWordPress Use Cases - Wordpress Can Do Anything
WordPress Use Cases - Wordpress Can Do Anything
 
Wordpress - YES or NO
Wordpress - YES or NOWordpress - YES or NO
Wordpress - YES or NO
 
What Is WordPress and Why Should I Use It? - Workshop April 2015
What Is WordPress and Why Should I Use It? - Workshop April 2015What Is WordPress and Why Should I Use It? - Workshop April 2015
What Is WordPress and Why Should I Use It? - Workshop April 2015
 
Best Practices in Theme Development - WordCamp Orlando 2012
Best Practices in Theme Development - WordCamp Orlando 2012Best Practices in Theme Development - WordCamp Orlando 2012
Best Practices in Theme Development - WordCamp Orlando 2012
 
Beyond Comments: How to Build an Awesome API Doc and Be a Better Person
Beyond Comments: How to Build an Awesome API Doc and Be a Better PersonBeyond Comments: How to Build an Awesome API Doc and Be a Better Person
Beyond Comments: How to Build an Awesome API Doc and Be a Better Person
 
The State of the Reseller Business - A Mid-Year Review
The State of the Reseller Business - A Mid-Year ReviewThe State of the Reseller Business - A Mid-Year Review
The State of the Reseller Business - A Mid-Year Review
 
top sites to learn coding
top sites to learn coding top sites to learn coding
top sites to learn coding
 
Word press workflows and gulp
Word press workflows and gulpWord press workflows and gulp
Word press workflows and gulp
 
Gulp WordPress @Grand-Frontend-Osaka 2015 Summer
Gulp WordPress @Grand-Frontend-Osaka 2015 SummerGulp WordPress @Grand-Frontend-Osaka 2015 Summer
Gulp WordPress @Grand-Frontend-Osaka 2015 Summer
 
Enterprise integration an arch fred a. cummins
Enterprise integration  an arch   fred a. cumminsEnterprise integration  an arch   fred a. cummins
Enterprise integration an arch fred a. cummins
 

Similar to Building a Website The Easy Way With Wordpress

WordPress Multisite deck
WordPress Multisite deckWordPress Multisite deck
WordPress Multisite deck
belsien
 
WordPress 3.0 overview
WordPress 3.0 overviewWordPress 3.0 overview
WordPress 3.0 overview
Pat Ramsey
 
WordPress For Beginners - WordCamp Nepal 2013
WordPress For Beginners - WordCamp Nepal 2013WordPress For Beginners - WordCamp Nepal 2013
WordPress For Beginners - WordCamp Nepal 2013
raushanchess
 

Similar to Building a Website The Easy Way With Wordpress (20)

Wordpress workshop
Wordpress workshopWordpress workshop
Wordpress workshop
 
University of Abertay Dundee - afternoon
University of Abertay Dundee - afternoonUniversity of Abertay Dundee - afternoon
University of Abertay Dundee - afternoon
 
University of Abertay Dundee - evening
University of Abertay Dundee - eveningUniversity of Abertay Dundee - evening
University of Abertay Dundee - evening
 
Matt doyleppt
Matt doylepptMatt doyleppt
Matt doyleppt
 
Campus Party 2010
Campus Party 2010Campus Party 2010
Campus Party 2010
 
What's Coming in WordPress 3.0
What's Coming in WordPress 3.0What's Coming in WordPress 3.0
What's Coming in WordPress 3.0
 
WordPress Multisite deck
WordPress Multisite deckWordPress Multisite deck
WordPress Multisite deck
 
Installation 02 (wp)
Installation 02 (wp)Installation 02 (wp)
Installation 02 (wp)
 
Yet Another Wordpress SEO
Yet Another Wordpress SEOYet Another Wordpress SEO
Yet Another Wordpress SEO
 
Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)
 
WordPress 3.0 overview
WordPress 3.0 overviewWordPress 3.0 overview
WordPress 3.0 overview
 
Word press 3.1 feature tour
Word press 3.1 feature tourWord press 3.1 feature tour
Word press 3.1 feature tour
 
WP-1-cms.pdf
WP-1-cms.pdfWP-1-cms.pdf
WP-1-cms.pdf
 
Wordpress
WordpressWordpress
Wordpress
 
WordPressTraining-CFAI-ParkarDigital.pptx
WordPressTraining-CFAI-ParkarDigital.pptxWordPressTraining-CFAI-ParkarDigital.pptx
WordPressTraining-CFAI-ParkarDigital.pptx
 
WordPress For Beginners - WordCamp Nepal 2013
WordPress For Beginners - WordCamp Nepal 2013WordPress For Beginners - WordCamp Nepal 2013
WordPress For Beginners - WordCamp Nepal 2013
 
How to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy StepsHow to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy Steps
 
Making WordPress Faster: Front-end Performance Techniques
Making WordPress Faster: Front-end Performance TechniquesMaking WordPress Faster: Front-end Performance Techniques
Making WordPress Faster: Front-end Performance Techniques
 
WordCamp Raleigh 2019 - Beginner's Guide to Wordpress
WordCamp Raleigh 2019 - Beginner's Guide to WordpressWordCamp Raleigh 2019 - Beginner's Guide to Wordpress
WordCamp Raleigh 2019 - Beginner's Guide to Wordpress
 
Creating Local WordPress Installs
Creating Local WordPress InstallsCreating Local WordPress Installs
Creating Local WordPress Installs
 

Building a Website The Easy Way With Wordpress

  • 1. Building a Website the easy way with By James Tryon Tuesday, January 26, 2010
  • 2. 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. Tuesday, January 26, 2010
  • 3. 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 Tuesday, January 26, 2010
  • 4. 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 Tuesday, January 26, 2010
  • 5. 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 Tuesday, January 26, 2010
  • 6. 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 Tuesday, January 26, 2010
  • 7. Flavors of WordPress .COM .COM | VIP Tuesday, January 26, 2010
  • 8. 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 Tuesday, January 26, 2010
  • 9. 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. Tuesday, January 26, 2010
  • 10. Create your Data Base Database Name: wordpress Default character set: utf8 Default Collation: utf8_bin Tuesday, January 26, 2010
  • 11. Create your User user name: wordpress_admin host: localhost password: iE8-MQG1DRPIOeVDYYSk_EMRR5Rfu&7Y confirm password: iE8-MQG1DRPIOeVDYYSk_EMRR5Rfu&7Y http://www.sethcardoza.com/tools/random_password_generator/ Tuesday, January 26, 2010
  • 12. 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 Tuesday, January 26, 2010
  • 14. Oh No! what do I do now? Tuesday, January 26, 2010
  • 15. We can do 3 things Tuesday, January 26, 2010
  • 16. We can do 3 things • let wordpress do all the work Tuesday, January 26, 2010
  • 17. We can do 3 things • let wordpress do all the work • Set up the wp-config.php your self Tuesday, January 26, 2010
  • 18. We can do 3 things • let wordpress do all the work • Set up the wp-config.php your self • We can stop here and go get a beer Tuesday, January 26, 2010
  • 19. We’ll Let WordPress Give it a Try Tuesday, January 26, 2010
  • 25. Still have errors? Tuesday, January 26, 2010
  • 26. Still have errors? Why do you hate me! Tuesday, January 26, 2010
  • 27. OK this is a easy fix Tuesday, January 26, 2010
  • 35. Are you sure your ready for this? Tuesday, January 26, 2010
  • 37. First thing’s First, lets change the password to something we can remember Tuesday, January 26, 2010
  • 38. I like "password" Tuesday, January 26, 2010
  • 40. lets take a look at our new WordPress site Tuesday, January 26, 2010
  • 42. Yep - that’s good old "Kubrick" but it's still a blog Tuesday, January 26, 2010
  • 43. Time to start customizing WordPress Tuesday, January 26, 2010
  • 44. Create a new user with administrator rights Tuesday, January 26, 2010
  • 48. logout from your admin account and login as that new user. Tuesday, January 26, 2010
  • 49. logout from your admin account and login as that new user. Then delete the old admin user and all his posts and links.  Tuesday, January 26, 2010
  • 51. It’s for Security admin is to common and it is the first account hackers will try Then delete all comments from test user, post, links, and Blogroll Tuesday, January 26, 2010
  • 54. Now you have an almost empty site to work on.  Tuesday, January 26, 2010
  • 56. Lets start to go through the settings tabs Tuesday, January 26, 2010
  • 59. All your basic stuff in here, you can change it as you see fit. I'm ok with it. Tuesday, January 26, 2010
  • 62. I never change anything on this page. You can set it up to post via e-mail but why Tuesday, January 26, 2010
  • 65. 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. Tuesday, January 26, 2010
  • 66. 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) Tuesday, January 26, 2010
  • 68. 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 Tuesday, January 26, 2010
  • 70. Privacy • lets you pick if you want search engines see your site. Tuesday, January 26, 2010
  • 72. Permalinks • Pretty urls • /%category%/%post_id%/%postname%/ Tuesday, January 26, 2010
  • 74. Miscellaneous • I leave this alone Tuesday, January 26, 2010
  • 76. 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 Tuesday, January 26, 2010
  • 80. 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 Tuesday, January 26, 2010
  • 83. Install, Activate and Configure Plugins (most good plugins have very ugly sites) Tuesday, January 26, 2010
  • 85. First off Remove "Hello Dolly" I really like Photo Matt but this plug-in is just dumb Tuesday, January 26, 2010
  • 88. 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... Tuesday, January 26, 2010
  • 94. Creating a Static Page • Lets start by creating a basic page in WordPress. We will call it home. Tuesday, January 26, 2010
  • 97. Install a new theme  • http://getk2.com/ • Supports Child themes • http://code.google.com/p/kaytwo/w/list Tuesday, January 26, 2010
  • 99. 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/ Tuesday, January 26, 2010
  • 100. 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 Tuesday, January 26, 2010
  • 102. A child theme needs • style.css • screenshot.jpg • what ever files you want to overwrite Tuesday, January 26, 2010
  • 104. 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 */ ?> Tuesday, January 26, 2010
  • 106. Working on creating a Static home page • Save all changes and upload • Then go back to settings->Reading • Change the radio button to static • Pick your Pages Tuesday, January 26, 2010
  • 109. Working on creating a Static home page • Next you can start to customized your templates. • This is almost plan HTML and CSS • Some cases no HTML just CSS Tuesday, January 26, 2010
  • 111. Working on creating a Static home page • Then your going to have to go to: pages: edit • Set your template • Check out your hard work Tuesday, January 26, 2010
  • 114. Extra Folders • I like to create basic folders in the root of my site: • js • img • flash Tuesday, January 26, 2010
  • 116. 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 Tuesday, January 26, 2010
  • 117. Navigation • combination of hard code  • wp_list_pages functions • pageMash • http://wordpress.org/extend/plugins/ pagemash/ Tuesday, January 26, 2010
  • 118. 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. Tuesday, January 26, 2010
  • 119. 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. Tuesday, January 26, 2010
  • 120. 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 Tuesday, January 26, 2010
  • 121. 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/ Tuesday, January 26, 2010