3. Creating A Homepage
Let’s just get a homepage going! Time to create!
• Create: home.php
• Adding css to style.css
4. Updating A Footer
Want to get rid of someone’s copyright? :-)
• Modify: footer.php
• Adding css to style.css
5. The Sidebar
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;
6. 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)
7. 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.
10. Why Is It Blank? No Screenshot.png
http://underscores.me/
11. 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.
13. 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;
14. 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.
15. 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!
20. 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
21. Common Functions: get_footer();
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_footer
22. Common Functions: get_sidebar();
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_sidebar
23. 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 specified criteria within The Loop tags.
26. The WordPress “Loop”
<?php
get_header();
if (have_posts()) :
while (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, filters it, and
then displays it.
27. The WordPress “Loop”
<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post(); ?>
<article>
<?php the_content(); ?>
</article>
<?php
endwhile;
endif;
get_sidebar();
get_footer();
?>
28. The WordPress “Loop”
<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post(); ?>
<article>
<?php the_content(); ?>
</article>
<?php
endwhile;
endif;
get_sidebar();
get_footer();
29. _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><!-- #main -->
</div><!-- #primary -->
<?php
get_sidebar();
get_footer();
