anatomy of a wordpress theme

20
Dharma Kelleher Kelleher Web Design www.kelleherwebdesign.com

Upload: dharma-kelleher

Post on 08-May-2015

1.653 views

Category:

Technology


1 download

DESCRIPTION

WordPress is the most popular, open-source content management system. Understanding how it works and how it differs from a static HTML site will help you create websites that are easy to update and improve.

TRANSCRIPT

Page 1: Anatomy of a WordPress Theme

Dharma KelleherKelleher Web Design

www.kelleherwebdesign.com

Page 2: Anatomy of a WordPress Theme

What is WordPress?

We’re talking WordPress.org not WordPress.com

WordPress is more than a blog. It’s a Content Management System (CMS).

Allow for sites to be easily updated without getting into the code

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 3: Anatomy of a WordPress Theme

What is a WordPress Theme?

Provides styling and functionality to a WordPress-driven website – like clothes to a body.

Some themes are free, others cost money; the best ones are custom-designed for your website.

I’m here to familiarize you with themes so you can customize your site.

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 4: Anatomy of a WordPress Theme

WTH? Where’s the HTML?

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 5: Anatomy of a WordPress Theme

WTH? Where’s the HTML?

Static sites are built with HTML (not easily updated)

WordPress is built mostly with PHP templates (which contain some HTML) connected to a MySQL database

The database stores info on posts, page content, settings, etc. PHP makes calls to the database.

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 6: Anatomy of a WordPress Theme

WTH? Where’s the HTML?

PHP:

Is more modular

Uses less code

Makes it easier to add and update content

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 7: Anatomy of a WordPress Theme

index.php

This is one of the two required template files for a WP theme (not required for a child theme).

Usually used as main blog page.

The core of index.php (and many other template files) is the Loop, which pulls in post or page content.

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 8: Anatomy of a WordPress Theme

index.php

Usually pulls in the header.php file

Often pulls in footer.php file

May also pull in sidebar(s) and other include files

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 9: Anatomy of a WordPress Theme

style.cssThe other required file for a WP theme (only

one required for a child theme)

CSS = Cascading StyleSheets

Controls size, position and style of elements

In WP, gives theme name, version, description, author, tags, etc.

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 10: Anatomy of a WordPress Theme

style.css

Reset CSS helps make browsers consistent

@media queries create special CSS for responsive width (e.g. phones, tablets)

Firebug (Firefox plugin) is great way to test CSS changes in the browser.

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 11: Anatomy of a WordPress Theme

Other Blog-Related Template Files

single.php – individual blog post page

category.php – lists blog posts in a single category

archive.php – lists blog post for a given time period

loop.php – some themes have separate file for the Loop

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 12: Anatomy of a WordPress Theme

Non-Blog Template Files

page.php – used for static (non-blog) pages

front-page.php – used for the static home page

404.php – for when a page can’t be found

functions.php – adds additional functionality and customization

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 13: Anatomy of a WordPress Theme

Non-Blog Template Files

Other page template files

Additional sidebars, footers, etc.

Include files (nav.php, meta.php, search.php, theme options, additional stylesheets)

Custom post typesDharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 14: Anatomy of a WordPress Theme

Non-PHP Template Files

screenshot.png

favicon.ico

image files (png, jpg, gif)

javascript

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 15: Anatomy of a WordPress Theme

Tools I Like to Use

Notepad++ – text editor

Photoshop – graphics design

Filezilla – file transfer (ftp)

Firebug – debugging code in Firefox

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 16: Anatomy of a WordPress Theme

Resources for Learning

WordPress Codex (codex.wordpress.org)

W3 Schools (w3schools.com)

WP Tuts (wp.tutsplus.com)

Stack Overflow (stackoverflow.com)

Page 17: Anatomy of a WordPress Theme

West Valley WordPress Group

Coming Soon! Here at Gangplank Avondale

www.meetup.com/West-Valley-WordPress-Users/

Open to all skill levels!!!

Dharma Kelleher, Lisa Faiss and Cody Landefeld to facilitate

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 18: Anatomy of a WordPress Theme

Your Freebie!

Create your own theme built on Dharmania

Theme Options and Responsive Width

Upload into your themes folder

www.kelleherwebdesign.com/free-stuff/

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 19: Anatomy of a WordPress Theme

Please Stalk Me!My Website – www.kelleherwebdesign.com

Follow me on Facebook, Twitter, LinkedIn and Google+ (links are on my website)

Punk the Web (my blog) – Great articles on design and marketing. Subscribe or else!

Email: [email protected]

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com

Page 20: Anatomy of a WordPress Theme

Any Questions?

Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com