Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

33
Get on the internet here using username/password: dtc_guest #wpcbus www.wpohio.com Follow @wpohio TONIGHTS SPEAKER @angiemeeker WWW.ANGIEMEEKERDESIGNS.COM #wpcbus www.wpohio.com Follow @wpohio TONIGHTS SPEAKER @angiemeeker WWW.ANGIEMEEKERDESIGNS.COM

description

Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Transcript of Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Page 1: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Get on the internet here using username/password: dtc_guest

#wpcbus

www.wpohio.com

Follow @wpohio

TONIGHT’S SPEAKER

@angiemeekerWWW.ANGIEMEEKERDESIGNS.COM

#wpcbus

www.wpohio.com

Follow @wpohio

TONIGHT’S SPEAKER

@angiemeekerWWW.ANGIEMEEKERDESIGNS.COM

Page 2: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

DISSECTINGWORDPRESSTHEME AND PAGE TEMPLATES

Page 3: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

WHY?Form and functionare two different, but relatedthings.

Page 4: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

other filesincludingwpwpwpwp----config.phpconfig.phpconfig.phpconfig.php.htaccessindex.php

The wp-config.php file contains a roadmap to your

MySQLMySQLMySQLMySQL database.database.database.database.

wp-admin

wp-content

wp-includes

IF WORDPRESS THREW UP.

Page 5: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Inside wp-config.php is

WordPress’ roadmap for

connecting to MySQL

database

Page 6: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

When installing WordPress yourself manually,you have to enter these values after creating a MySQL database.

When using a one-click install through a hosting company,

they create the database and fill in these values for you.

define (‘DB_INFORMATION’)

Page 7: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

WHAT’S IS IN THE DATABASE?Tables of all of your stuff.

http://codex.wordpress.org/Database_Description

List of userswp_users

Meta information per userwp_usermeta

Description of taxonomy (category, link, tag)wp_term_taxonomy

Association of posts with categories, link categorieswp_term_relationships

Categories and Tagswp_terms

Posts, Pages, Navigation Menu Itemswp_posts

Meta information per postwp_postmeta

Options set under Administration>Settingswp_options

Information related to the Links featurewp_links

Commentswp_comments

Meta information per commentwp_commentmeta

Page 8: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

With WordPress connected to your MySQL database,we’ll use PHP to retrieve that information through directions specific to the page viewed on your site.

These PHP directions for each page template,along with the CSS to style those directions,make up your WordPress theme.

CLEANING UP.

Page 9: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

WHERE

TO FIND

YOUR

THEMES

IN YOUR

WP

INSTALLwpwpwpwp----content/themescontent/themescontent/themescontent/themes

Page 10: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

wp-admin

wp-content

wp-includes

themes

plugins

other files

twentytwelve

meetupWHERE

TO FIND

YOUR

THEMES

IN YOUR

WP

INSTALL

Page 11: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

twentytwelve

index.php

style.css

ALL

THEMES

MUST

INCLUDE

AT

LEAST

THESE

FILES

Page 12: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

/*Theme Name: Twenty TwelveTheme URI: http://wordpress.org/Description: The 2012 default theme for WordPress.Author: wordpressdotorgAuthor URI: http://wordpress.org/Version: 1.0Tags: black, blue, white, two-columns, fixed-widthLicense:License URI:

General comments (optional).*/

YOUR CSS GOES HERE.

style.c

ss

Page 13: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

<?php get_header();

get_footer(); ?>

if (if (if (if (have_postshave_postshave_postshave_posts())())())()) ::::while (while (while (while (have_postshave_postshave_postshave_posts())())())()) : : : :

the_postthe_postthe_postthe_post(); (); (); (); the_contentthe_contentthe_contentthe_content(); (); (); ();

endwhileendwhileendwhileendwhile; ; ; ; endifendifendifendif; ; ; ;

index.

php

Page 14: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

My Site NameSite DescriptionPage One Page Two

Footer Stuff

The full contentcontentcontentcontent of my first post would be here.

The full contentcontentcontentcontent of my second post would be here.

index.

php

Page 15: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

index.

php

header

first post

second postfooter

Page 16: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

HOW DO

YOU GET

FROM

THAT TO

THIS?

Page 17: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

GET THEREUSING TEMPLATES & TEMPLATE TAGS &CSS.

http://codex.wordpress.org/Stepping_Into_Templateshttp://codex.wordpress.org/Stepping_Into_Template_Tags

this we’re not covering at all.

this we’re barely covering tonight.

Page 18: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

twentytwelveMOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

index.php

style.css

header.php

sidebar.php

footer.php

single.php

archive.php

category.php

tag.php

comments.php

functions.php

home.php

front-page.php

page.php

Page 19: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

index.php

One template to

rule them all.

style.css

Defines the style of the HTML elements of your site

Page 20: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

home.php

Default front page

(which by defaultshows latest posts).

If you use a static pageas your front page,

this template is used foryour “Posts Page.”

Page 21: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

front-page.php

If you use a static page

as your front page,this is the template used.

Page 22: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

single.php

Displays a single post.

Page 23: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

page.php

Displays a single page.

Page 24: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

header.php

Add a call to wp_head().

<?php wp_head(); ?>Plugins use this action hook to add their own scripts,

stylesheets, and other functionality.

Include a call to the nav menu<?php wp_nav_menu(); ?>

Page 25: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

footer.php

Should include a call to

the footer before the closing body tags:

<?php wp_footer(); ?></body></html>

(Bad themes don’t have this, and curse the world because of it).

Page 26: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

comments.php

Used to display the

comments template.

Page 27: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

sidebar.php

Used to display a sidebar

and its widgetized areas

Page 28: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

functions.php

EnableEnableEnableEnable features such as

SidebarsNavigation MenusPost ThumbnailsPost FormatsCustom Headers

Custom BackgroundsAdditional Widget Are

Page 29: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

archive.php

Used when a category,

author, or date is queried.

Will be overidden if a category.php, author.phpor date.php template is

available.

Page 30: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

category.php

Used to display a

category archive.

Page 31: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

tag.php

Used to display a tag

archive.

date.php

Used to display a date archive (year, month,

week, date).

Page 32: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

This was only an intro.The Loop leads to…Multiple loops…Templates lead to…Custom templates…Template tags lead to…Conditional tags…

This was only an intro.The Loop leads to…Multiple loops…Templates lead to…Custom templates…Template tags lead to…Conditional tags…

Page 33: Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Angie Meeker@[email protected]

Download sample files:

http://goo.gl/IFzhz