Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Post on 15-May-2015

5.768 views 1 download

Tags:

description

Dissecting WordPress Themes and Page Templates, WordPress Columbus Meetup

Transcript of 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

DISSECTINGWORDPRESSTHEME AND PAGE TEMPLATES

WHY?Form and functionare two different, but relatedthings.

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.

Inside wp-config.php is

WordPress’ roadmap for

connecting to MySQL

database

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’)

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

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.

WHERE

TO FIND

YOUR

THEMES

IN YOUR

WP

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

wp-admin

wp-content

wp-includes

themes

plugins

other files

twentytwelve

meetupWHERE

TO FIND

YOUR

THEMES

IN YOUR

WP

INSTALL

twentytwelve

index.php

style.css

ALL

THEMES

MUST

INCLUDE

AT

LEAST

THESE

FILES

/*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

<?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

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

index.

php

header

first post

second postfooter

HOW DO

YOU GET

FROM

THAT TO

THIS?

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.

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

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

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.”

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

front-page.php

If you use a static page

as your front page,this is the template used.

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

single.php

Displays a single post.

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

page.php

Displays a single page.

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(); ?>

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).

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

comments.php

Used to display the

comments template.

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

sidebar.php

Used to display a sidebar

and its widgetized areas

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

functions.php

EnableEnableEnableEnable features such as

SidebarsNavigation MenusPost ThumbnailsPost FormatsCustom Headers

Custom BackgroundsAdditional Widget Are

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.

MOST

OFTEN,

THEMES

INCLUDE

THESE,

TOO.

category.php

Used to display a

category archive.

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).

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…

Angie Meeker@angiemeekerangie@angiemeekerdesigns.com614.353.0633

Download sample files:

http://goo.gl/IFzhz