Transcript WordPress 101 Structure, themes, functionality Beckydavisdesign.com @beckyddesign What is WordPress? WordPress is an open source blog tool and publishing platform powered by PHP and MySQL.

WordPress 101
Structure, themes, functionality
Beckydavisdesign.com
@beckyddesign
What is WordPress?
WordPress is an open source blog tool and publishing
platform powered by PHP and MySQL. It's often
customized into a Content Management
System (CMS). It has many features including a plugin architecture and a template system.
From Wikipedia, the free encyclopedia
Beckydavisdesign.com
@beckyddesign
Different Flavors of WordPress
Wordpress.com –
Set up a site for free and start blogging!
Limited template choices
Restricted plug-in use
Non-commercial only
Limited traffic allowed
Yourdomain.wordpress.com
Beckydavisdesign.com
@beckyddesign
Different Flavors of WordPress
Wordpress.org –
Install the software on your hosting server – many hosts have
a quick way to do this through the control panel
Download the software and install it to your local machine.
(Will need Apache server, xampp, wamp, mamp)
Famous less than 5 minute install (after DB has been
configured)
Almost unlimited design and functionality options
Keep it updated!
Recommend using a pro to get things designed and setup.
Coding knowledge is necessary.
Beckydavisdesign.com
@beckyddesign
WP as a CMS
Clients can log in and edit/create blog
posts or pages for their sites easily.
Beckydavisdesign.com
@beckyddesign
Posts and Pages
Pages - for most of the regular “static” pages of the site, i.e.
Home, Contact, About
Pages can be edited and changed at any time
They generally do not have dates attached to them
Posts – for the “blog”
“Dynamic”, because of comments and
Default at Latest First
All posts show up in a list
Beckydavisdesign.com
@beckyddesign
Custom Post Types
With programming knowledge, the back-end can be
customized for users and “custom post-types” can be created.
Custom post types can be configured to suit the need
Product pages
Chamber of Commerce members
Real-estate listings
Wherever you need a specific type of entry with the
formatting locked down
Or multiple blog types are needed
Beckydavisdesign.com
@beckyddesign
What are Themes?
Themes control the Look, Feel and Functionality of
a WordPress site.
Ready-made themes
wordpress.org/extend/themes/ - free
themeforest.net/category/wordpress - $20-50
woothemes.com – subscription pricing
Carefully investigate the documentation and support
before purchase.
Themes can be built from scratch
Child themes can be built based on a parent
(Recommended!)
Beckydavisdesign.com
@beckyddesign
Theme Files
Beckydavisdesign.com
@beckyddesign
Core Theme Files
*Index.php – the Blog home page. Many posts in a list, or latest post or
excerpts depending on the code.
*Style.css – The heart of the theme
Single.php – Single blog post.
Page.php – Static pages
Different template page files can be made
Sidebar, Footer & Header – just what they should be
Archive, Comments, Search – don’t generally need to edit
Functions – may need to add code for specific needs
Put a comment at the top of each file so you can see which one
you’re dealing with, very helpful! ( <!--header--> )
Beckydavisdesign.com
@beckyddesign
Theme Structure
All of these files
connect to the
mySQL database.
That’s where the
content lives.
Widgets mostly
live in the sidebar,
but can be in the
footer or header
too!
Beckydavisdesign.com
@beckyddesign
Style.css
This is the code that makes your theme readable to WP.
/*
Theme Name: Sones de Mexico
Theme URI: http://beckydavisdesign.com
Description: Sones de Mexico
Author: Becky Davis
Version: 1.0
*/
Beckydavisdesign.com
@beckyddesign
CSS
The heart of how the design works
Best practice CSS applies
If creating a child theme, remember the cascade!
Child style.css will overwrite parent
Use Firebug to see native WP classes that you may want to
style (.entry-title etc.)
Beckydavisdesign.com
@beckyddesign
Modifying a Ready-made Theme
Play surgeon and take it apart
Twentyeleven Theme is very well documented and an
excellent parent
Create new art that matches the exact dimensions and name
of the original
Add or change widgets/plug-ins for different functionality
Create a Child theme, based on a parent
Beckydavisdesign.com
@beckyddesign
Creating a Theme from Scratch
It’s all about the CSS, images and plug-in functionality
Page.php and index.php will have the html divs you want around the
“loop”
Create header and other images as you normally would
CSS decides size and placement of divs and background images as with
any site
Plug-ins give you the flexibility/functionality you need for the site
Themes can be created as an “add-on” to an existing regular site
Beckydavisdesign.com
@beckyddesign
Images
Images specific to the Theme (referenced in the stylesheet)
go in the wp-content/themes/name-of-theme/images folder
The newest themes allow the header and background images
to be changed by the user.
Images uploaded within WP editor for a specific page get put
in the Uploads folder
WP will re-size, but all uploaded images should be “saved
for web” and sized appropriately first!
Beckydavisdesign.com
@beckyddesign
Plug-ins & Widgets
Widgets come from Plug-ins, not all Plug-ins create
Widgets.
Plug-ins create functionality:
Backup, slideshow, add videos, create forms
Widgets are modules that can be placed in certain locations,
like the sidebar.
Forms, twitter feed, testimonials, shopping cart
Available on wordpress.org/extend/plugins
Look for ratings, last update, popularity
If one doesn’t work, try another!
Beckydavisdesign.com
@beckyddesign
Plug-ins
Over 6,000 to choose from, test and play!
All-in-one SEO
Akismet – default, activate it for spam control!
Google Analytics for WordPress
Si-contact form
Wp-db-backup
Vipers video quicktags
Photospace
Dynamic Widgets
Custom Post Type UI
Cart 66
Beckydavisdesign.com
@beckyddesign
Examples of WP sites
Zhuliajewels.com – ecommerce, custom post type for products
Gailzelitzky.com - multiple footers
Belmontcentral.org – custom post type for members
Newageprep.com
Lionelhandbags.com - ecommerce
Glenellynmoving.com
2011.chicago.wordcamp.org
Clementsbenefits.com
Rbbrenner.com – classic blog w/ fancy sidebar
Beckydavisdesign.com
@beckyddesign
Further Resources
http://codex.wordpress.org/Main_Page - Excellent
documentation
http://wordpress.org/extend/ - Plugins, themes etc.
http://www.wpdesigner.com/2007/02/19/so-you-wantto-create-wordpress-themes-huh/ - Stupidest title, best
step by step tutorial. Assumes you have little
html/css/php knowledge.
Smashing WordPress by Hedengren
Digging into WordPress by Coyier and Starr
Beckydavisdesign.com
@beckyddesign
Contact
773-809-5640
[email protected]
beckydavisdesign.com (also a WordPress site, of
course!)
Beckydavisdesign.com
@beckyddesign