Intro to WordPress Theme Development

I N T R O T O W O R
D P R E S S T H E M E D E V E L O P M E N T @ S O C A LW P M E E T U P J U N E 1 8 , 2 0 1 4

@ M O D E M L O O P
E R Ryan

W H AT I S A T H E M
E ? T H E M E S

A WordPress theme is utilized to give structure and design
to the content of a site. It’s what people see when they visit a site from a web browser.

WordPress theme ﬁles are located at url.com/wp-content/themes

T H E M E C O M P O
N E N T S • Template files • CSS files • Javascript files ?

Y O U O N LY N E E D
T H E S E T W O F I L E S T O A C T I VAT E A T H E M E I N W O R D P R E S S • index.php • style.css

This is a themes main style sheet and contains information
WordPress uses to install a theme. S T Y L E . C S S

/* Theme Name: Twenty Twelve Theme URI: http://wordpress.org/themes/twentytwelve Author: the
WordPress team Author URI: http://wordpress.org/ Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background. Version: 1.4 */

.entry-meta { clear: both; } .entry-header { margin-bottom: 24px; margin-bottom:
1.714285714rem; } .entry-header img.wp-post-image { margin-bottom: 24px; margin-bottom: 1.714285714rem; } Got Styles?

I N D E X . P H P This
is the first template file WordPress looks for to display content codex.wordpress.org/Template_Hierarchy

O T H E R C O M M O
N T E M P L AT E S • header.php • sidebar.php • footer.php

index.php header.php footer.php sidebar.php T Y P I C A
L T E M P L AT E S T R U C T U R E

H E A D E R . P H P
This includes the html head ! and opening body tag. ! Generally this file includes your site navigation. <?php get_header(); ?> <head>…</head> <body>

<html> <head> <?php wp_head(); ?> </head> <body> <div class=“content”> H
E A D E R . P H P

S I D E B A R . P H
P This file usually contains additional structured content you want displayed on every page load. <?php get_sidebar(); ?>

F O O T E R . P H P
This includes the closing body tag ! This file can also display additional content <?php get_footer(); ?> </body>

F O O T E R . P H P
</div> <?php wp_footer(); ?> </body> <html>

I N D E X . P H P <?php
get_footer(); ?> <?php get_sidebar(); ?> <?php get_header(); ?> Here is were you display content. This is in the form of a WordPress loop.

I N D E X . P H P <?php
get_footer(); ?> <?php get_sidebar(); ?> <?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php endif; ?>

T H E L O O P codex.wordpress.org/The_Loop

F U N C T I O N S .
P H P The functions file is automatically loaded by WordPress and contains functions to add functionality to your theme. • Sidebars for widgets • Navigation menus • Style options • Template functions

T H E M E F O L D E
R themes/ your-theme/ index.php header.php footer.php sidebar.php page.php single.php style.css

L E A R N M O R E codex.wordpress.org/Theme_Development
teamtreehouse.com/library/how-to-build-a-wordpress-theme Happy building!

Intro to WordPress Theme Development

Intro to WordPress Theme Development

modemlooper

More Decks by modemlooper

Other Decks in How-to & DIY

Featured

Transcript

I N T R O T O W O R

@ M O D E M L O O P

W H AT I S A T H E M

A WordPress theme is utilized to give structure and design

WordPress theme ﬁles are located at url.com/wp-content/themes

T H E M E C O M P O

Y O U O N LY N E E D

This is a themes main style sheet and contains information

/* Theme Name: Twenty Twelve Theme URI: http://wordpress.org/themes/twentytwelve Author: the

.entry-meta { clear: both; } .entry-header { margin-bottom: 24px; margin-bottom:

I N D E X . P H P This

O T H E R C O M M O

index.php header.php footer.php sidebar.php T Y P I C A

H E A D E R . P H P

<html> <head> <?php wp_head(); ?> </head> <body> <div class=“content”> H

S I D E B A R . P H

F O O T E R . P H P

F O O T E R . P H P

I N D E X . P H P <?php

I N D E X . P H P <?php

T H E L O O P codex.wordpress.org/The_Loop

F U N C T I O N S .

T H E M E F O L D E

L E A R N M O R E codex.wordpress.org/Theme_Development