wordcamp 2010

16
WordPress Themes for Beginners (non-programmers) Bonnie Vasko VaskoInteractive.com @vaskointeractv

Upload: bonnie-vasko

Post on 15-May-2015

913 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Wordcamp 2010

WordPress Themes for Beginners(non-programmers)Bonnie VaskoVaskoInteractivecom

vaskointeractv

Bonnie Vasko

UI Developer at Comcast (until recently that is)

Developer at NetReach (maker of cmScribe cms)

Freelance web developervaskointeractv

About this Talk

High Level Overview

Not a code review

Walk away with an understanding of

Where to find themes

Paid vs Free

Parent Child Themes

Theme Frameworks

Theme Structure

What is a theme

Itrsquos a way to your skin your site

How your site looks

How your site works

Keeps the functionality separate from the core wordpress files

3 Ways to Install a Theme

1 - Search and Install from the admin panel

2 - Upload a zip file from your computer let wordpress decompress and install

3 - FTP your theme to wp-contentthemes

How to choose a themePlan your site layout before choosing

Not choose the theme and follow that

Think about what functionality you will need

Have your site content planned

Will you be using pages or posts

Categories or tags

social media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 2: Wordcamp 2010

Bonnie Vasko

UI Developer at Comcast (until recently that is)

Developer at NetReach (maker of cmScribe cms)

Freelance web developervaskointeractv

About this Talk

High Level Overview

Not a code review

Walk away with an understanding of

Where to find themes

Paid vs Free

Parent Child Themes

Theme Frameworks

Theme Structure

What is a theme

Itrsquos a way to your skin your site

How your site looks

How your site works

Keeps the functionality separate from the core wordpress files

3 Ways to Install a Theme

1 - Search and Install from the admin panel

2 - Upload a zip file from your computer let wordpress decompress and install

3 - FTP your theme to wp-contentthemes

How to choose a themePlan your site layout before choosing

Not choose the theme and follow that

Think about what functionality you will need

Have your site content planned

Will you be using pages or posts

Categories or tags

social media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 3: Wordcamp 2010

About this Talk

High Level Overview

Not a code review

Walk away with an understanding of

Where to find themes

Paid vs Free

Parent Child Themes

Theme Frameworks

Theme Structure

What is a theme

Itrsquos a way to your skin your site

How your site looks

How your site works

Keeps the functionality separate from the core wordpress files

3 Ways to Install a Theme

1 - Search and Install from the admin panel

2 - Upload a zip file from your computer let wordpress decompress and install

3 - FTP your theme to wp-contentthemes

How to choose a themePlan your site layout before choosing

Not choose the theme and follow that

Think about what functionality you will need

Have your site content planned

Will you be using pages or posts

Categories or tags

social media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 4: Wordcamp 2010

What is a theme

Itrsquos a way to your skin your site

How your site looks

How your site works

Keeps the functionality separate from the core wordpress files

3 Ways to Install a Theme

1 - Search and Install from the admin panel

2 - Upload a zip file from your computer let wordpress decompress and install

3 - FTP your theme to wp-contentthemes

How to choose a themePlan your site layout before choosing

Not choose the theme and follow that

Think about what functionality you will need

Have your site content planned

Will you be using pages or posts

Categories or tags

social media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 5: Wordcamp 2010

3 Ways to Install a Theme

1 - Search and Install from the admin panel

2 - Upload a zip file from your computer let wordpress decompress and install

3 - FTP your theme to wp-contentthemes

How to choose a themePlan your site layout before choosing

Not choose the theme and follow that

Think about what functionality you will need

Have your site content planned

Will you be using pages or posts

Categories or tags

social media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 6: Wordcamp 2010

How to choose a themePlan your site layout before choosing

Not choose the theme and follow that

Think about what functionality you will need

Have your site content planned

Will you be using pages or posts

Categories or tags

social media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 7: Wordcamp 2010

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATUREDCONTENT

AREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 8: Wordcamp 2010

Where to get themesThe WordPress Repository (Free)

Smashing Magazine (free updated annually)

Woo Themes High Quality

Paid Themes

Woo Themes

Theme Forest

Many more

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 9: Wordcamp 2010

Parent Child Themes

A child theme inherits the functionality of the parent theme

You can create a child of any theme

Upgrade the parent theme without losing your changes

Live Demo

Child Theme Basics

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 10: Wordcamp 2010

Setting up a child theme(in 4 easy steps)

Create a new folder and add a stylecss file

Modify the child themersquos stylecss header

Import amp override parent styles

Optional step Override parent theme templates

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 11: Wordcamp 2010

Theme Frameworks

What is a framework

Gives you a starting point - styles and layout that are common to all themes are already set up

3 free frameworks Hybrid Thematic amp Sandbox

Advantages Large community widely used open

Paid frameworks Thesis amp Genesis

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 12: Wordcamp 2010

Template FilesTemplate files are the building blocks of your WordPress site They fit together like the pieces of a puzzle to generate the web pages on your site Some templates (the header and footer template files for example) are used on all the web pages while others are used only under specific conditions

Header ltphp get_header() gt this is a template tag

Footer ltphp get_footer() gt

ContentldquoThe Looprdquo

Sidebar ltphp get_sidebar() gt

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 13: Wordcamp 2010

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 14: Wordcamp 2010

Theme Files

REPRODUCED (WITH PERMISSION) FROM ldquoDIG INTO WORDPRESSrdquo BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP

Page 15: Wordcamp 2010

The LoopThe Loop is used by WordPress to display each of your posts Using The Loop WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags Any HTML or PHP code placed in the Loop will be repeated on each post When WordPress documentation states This tag must be within The Loop such as for specific Template Tag or plugins the tag will be repeated for each post

ltphp The Loop

if (have_posts()) while (have_posts()) the_post()

gt

HTTPCODEXWORDPRESSORGTHE_LOOP