220 likes | 404 Views
WordPress 101 Structure, themes, functionality. 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 plug-in architecture and a template system.
E N D
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 plug-in architecture and a template system. • From Wikipedia, the free encyclopedia
Different Flavors of WordPress • Wordpress.com – • Set up a site for freeand start blogging! • Limited template choices • Restricted plug-in use • Non-commercial only • Limited traffic allowed • Yourdomain.wordpress.com
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.
WP as a CMS • Clients can log in and edit/create blog posts or pages for their sites easily.
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
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
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!)
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--> )
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!
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 • */
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.)
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
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
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!
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!
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
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
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-want-to-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
Contact • 773-809-5640 • becky@beckydavisdesign.com • beckydavisdesign.com (also a WordPress site, of course!)