This document provides an overview of theme surgery and customizing WordPress themes. It discusses getting started with theming, using child themes to modify existing themes without directly editing files, and some helpful functions for adding functionality like menus and sidebars. The key points covered are:
- Child themes allow modifying a parent theme's appearance without overwriting files on updates
- Functions.php is used to add extra functionality to a theme
- Templates can be created for non-standard page layouts
- Menus and sidebars can be registered and called in functions.php and template files
7. What are Themes?
• PHP files
• CSS files
• JavaScript files
• Images
They control the look and feel of your site.
They are located in /wp-content/themes.
7
8. Theme Structure
Themes are (or should be) broken into logical
components that mimic the way we typically think
about web pages:
• header
• body
• sidebar
• footer
8
9. Structure Visualized
These parts relate to files in a theme:
header.php Header
sidebar.php
index.php
page.php Body/Content Sidebar
single.php
Footer footer.php
9
10. More Theme Structure
Themes can contain more files:
• archive.php
• content.php
• category.php
• image.php
• search.php
• page-home.php (a page template file)
10
13. Modes of Learning
Some folks learn best
when starting from
scratch.
I don’t.
I like to
break things.
13
14. Getting Started
Find a theme that is close to what you want:
structurally
visually
functionally
14
15. Theme Surgery
remove what you don’t want or need
change the colors
tweak the typography
alter the html structure
rewrite the styles
make the logo bigger…
15
17. Another Word of Caution
If you edit a theme from the directory:
change the stylesheet so it doesn’t
accidentally get overwritten when an
upgrade is released!
17
19. Child Themes
Child themes also:
• Allow you to change the appearance of your
site without compromising the original theme
• Give you the ability to fall back to the original
at the click of a button
19
20. Child Themes
/*
Theme Name: heavy metal ground hog
Theme URI: http://rationalfrank.com
Author: Matthew DeVille
template Author URI: http://rationalfrank.com/
refers to the Description: simple responsive theme!
name of the Template: crashcourse
parent theme’s Version: 1.0
directory License: GNU General Public License
License URI: license.txt
Tags: simple, responsive
*/
import the
parent theme’s @import url(“../crashcourse/style.css”);
stylesheet
20
21. Child Themes
Only bring over
the styles you
want to override.
AND
Only bring over
the files you want
to override.
21
22. CSS Not Enough?
If you need to change the HTML structure, you can
still do surgery with child themes.
• It is still non-invasive, but very effective.
• Add files to your child theme to override the
parent theme.
• Add functions to the child theme functions file
to allow for further customization.
22
23. The Loop
The loop is the center of the
Wordpress universe.
• it is basically an elaborate
while loop
• use it to cycle through
multiple posts and display
in a list
• use it to display the
content of one post/page
23
24. The Loop
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class=”post”>
<h1><?php the_title(); ?></h2> output post/page
<?php the_content(); ?> content here.
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched
your criteria.’); ?></p>
<?php endif; ?>
24
25. Use body_class();
Make sure your theme uses body class. It will give
you clues to the file being used to generate a
specific page.
<body <?php body_class(); ?>>
Firebug rules
25
26. Images and Paths
Want to include an image? Code for portability:
WRONG
<img src=”/images/groundhog_of_doom.jpg”>
USE
<?php bloginfo(‘template_url‘); ?>
RIGHT
<img src=”<?php bloginfo(‘template_url‘); ?>/images/
groundhog_of_doom.jpg”>
26
27. CSS and Javascript
The same goes for CSS and JS. Code for portability:
WRONG
<script src=”/wp-content/themes/crashcourse/js/respond.min.
js”></script>
USE
<?php bloginfo(‘template_url‘); ?>
RIGHT
<script src=”<?php bloginfo(‘template_url‘); ?>/js/respond.
min.js”></script>
27
28. What is your Function?
functions.php is where you add functionality to
you theme:
• sidebars
• menus
• post thumbnails
• custom post types
• general use functions
28
29. Adding Menus
Your theme can have one or many menus:
register_nav_menu(
‘main_nav’, location
‘Main Navigation’ description
);
register_nav_menu(
‘footer_nav’,
‘Main Navigation’
);
29
30. Calling Menus
You could then call those menus:
by name:
wp_nav_menu(
array(‘menu’ => ‘Main Navigation’ )
);
or by location
wp_nav_menu(
array(‘location’ => ‘main_nav’ )
);
30
31. Adding Sidebars
Your theme can have multiple sidebars:
register_sidebar(
array(
‘name’ => __( ‘Right Hand Sidebar’ ),
‘id’ => ‘right-sidebar’,
‘description’ => __( ‘Widgets in this area will
be shown on the right-hand side.’ ),
‘before_title’ => ‘<h1>’,
‘after_title’ => ‘</h1>’
)
);
31
33. Calling Sidebars
You could then call those sidebars:
by name:
<?php dynamic_sidebar(‘Right Sidebar 1’); ?>
or by ID:
<?php dynamic_sidebar(‘right-sidebar-1’); ?>
33
34. Adding a Page Template
Not every page in a site needs to look the same.
That’s where templates come in handy.
<?php
/*
Template Name: Full Width
*/
get_header();
?>
34