WordPress Theme Workshop: Part 3

WordPress Theme
Workshop: Part 3
November 4th, 2017
David Bisset
davidbisset.com / @dimensionmedia

Theme Frameworks
Also Sometimes Known As “Starter Themes”
A theme framework as the core or foundation of a theme,
which allows users to create their own child themes even if
they have little or no experience in coding.
(See Email For List Of Theme Frameworks - Paid and Free)

What Is Underscores or _s?
Ultra-Minimal CSS theme
• A just right amount of lean, well-commented, modern, HTML5 templates.
• A helpful 404 template.
• A custom header implementation in inc/custom-header.php just add the
code snippet found in the comments of inc/custom-header.php to your
header.php template.
• Custom template tags in inc/template-tags.php that keep your templates
clean and neat and prevent code duplication.
• Some small tweaks in inc/template-functions.php that can improve your
theming experience.
• A script at js/navigation.js that makes your menu a toggled dropdown on
small screens (like your phone), ready for CSS artistry. It's enqueued in
functions.php.
• 2 sample CSS layouts in layouts/ for a sidebar on either side of your
content.
• Smartly organized starter CSS in style.css that will help you to quickly get
your design off the ground.

_s Starter Theme
http://underscores.me/

Download And Install _s Theme

Why Is It Blank? No Screenshot.png

Screenshot For Your Theme!
The screenshot should be
named screenshot.png, and
should be placed in the top
level directory.
The recommended image
size is 1200px wide by
900px tall.

Common Files
header.php - This file will contain the code for the header section of the theme;
index.php - This is the main file for the theme. It will contain the code for the Main
Area and will specify where the other files will be included;
sidebar.php - This file will contain the information about the sidebar;
footer.php - This file will handle your footer;
style.css - This file will handle the styling of your new theme;

Template Tags
A template tag is simply a piece of code that tells
WordPress to get something from the database. It is
broken up into three components:
• A PHP code tag
• A WordPress function
• Optional parameters

Template Tags
For example, the template tag get_header() tells
WordPress to get the header.php file and include it in the
current theme file. Similarly, get_footer() tells WordPress
to get the footer.php file.

Template Tags
For example, the template tag get_header() tells
WordPress to get the header.php file and include it in the
current theme file. Similarly, get_footer() tells WordPress
to get the footer.php file.
Let’s Take A Closer Look!

Common Functions: wp_head();
Found in: header.php

Common Functions: wp_head();
Found in: header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="proﬁle" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

Common Functions: wp_footer();
Found in: footer.php

Common Functions: wp_footer();
Found in: footer.php
</div>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'workshop-theme' ) ); ?
>"><?php
/* translators: %s: CMS name, i.e.WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'workshop-theme' ),
'WordPress' );
?></a>
<span class="sep"> | </span>
<?php
/* translators: 1:Theme name, 2:Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'workshop-theme' ), 'workshop-
theme', '<a href="http://davidbisset.com">David Bisset</a>' );
?>
</div>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

Common Functions: get_header();
Most Of Your Template Pages InYour Theme
/* 404.php */
<?php get_header(); ?>
<h2>Error 404 - Not Found</h2>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
https://codex.wordpress.org/Function_Reference/get_header

Common Functions: get_footer();
/* 404.php */
https://codex.wordpress.org/Function_Reference/get_footer

Common Functions: get_sidebar();
/* 404.php */
https://codex.wordpress.org/Function_Reference/get_sidebar

The WordPress “Loop”
The Loop is PHP code used by WordPress to display posts.
Using The Loop,WordPress processes each post to be
displayed on the current page, and formats it according to
how it matches speciﬁed criteria within The Loop tags.

<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>

<?php
get_header();
if (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>
it checks whether any posts were discovered
If there were any posts, let’s do this until
there are no more
“loads up” the post and it’s data
The the_content() template tag fetches
the content of the post, ﬁlters it, and
then displays it.

<?php
get_header();
if (have_posts()) :
the_post(); ?>
<article>
<?php the_content(); ?>
</article>
<?php
endwhile;
endif;
get_sidebar();
get_footer();
?>

<?php
get_header();
if (have_posts()) :
the_post(); ?>
<article>
<?php the_content(); ?>
</article>
<?php
endwhile;
endif;
get_sidebar();
get_footer();

_s single.php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_type() );
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment
template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main>
</div>
<?php
get_sidebar();
get_footer();

get_template_part()
<?php get_template_part( 'partials/content', 'page' ); ?>

WordPress Theme Workshop: Part 3

More Related Content

What's hot

Similar to WordPress Theme Workshop: Part 3

More from David Bisset

Recently uploaded

WordPress Theme Workshop: Part 3