Stanko Metodiev
- WordPress Developer and
Project Manager @ DevriX - Shisha smoker
- Sometimes blogger
- @metodiew
Before we start
How many of you are:
- developers?
- designers?
- Bloggers/Users?
A WordPress Theme
From the Codex:
A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog
In other words: a WordPress theme takes care of the presentation of your WordPress site.
Do’s and Don’ts
Let’s start with Don’ts
… because It’s easier to be/to start with the negative :)))
Presentation vs Functionality
- The WordPress theme *should* be used for the presentation
- Use Plugins for the functionality
Bundled Scripts
- Don’t include scripts which are in WordPress core already
Bundled Plugins
- Don’t, please don’t!
- Prepare your theme to support plugins, don’t include them
- Use TGM plugin if you need to use plugins with your theme
- Slider Revolution vulnerability
Custom Post Types
- I really love them!
- and I used them almost everywhere
- but…
- but their place is not in your theme
- they *should* be used with plugins
Don’t use query_posts()
Don’t use query_posts() (2)
“query post() is bad and you should never use it”
– Andrew Nacin, WordPress Lead Developer
Bad Theme template example
No comment!

Seriously!?
Do’s
Presentation vs Functionality (again)
- The WordPress theme *should* be used for the presentation
- Use Plugins for the functionality
WordPress Coding Standards
- We all do love well-written code.
- We all *should* write well-written code.
- WordPress Coding Standards
- WordPress Theme Development Standards
Theme Unit Test
WP Enqueue*
wp_enqueue_style();
wp_enqueue_script();
add_action( 'wp_enqueue_scripts',
'textdomain_enqueue_style' );
add_action( 'wp_enqueue_scripts',
'textdomain_enqueue_script' );
add_action( 'admin_enqueue_scripts', 'textdomain_load_custom_wp_admin_style' );
body_class();
<body <?php body_class(); ?>>
<body <?php body_class(
'my-custom-body-class-here' ); ?>>
add_filter( 'body_class',
'masonry_body_classes' );
post_class();
<article id="post-<?php the_ID(); ?>"
<?php post_class(); ?>>
// add a custom class if you need
<article id="post-<?php the_ID(); ?>"
<?php post_class( 'entry' ); ?>>
Page Templates
Template Files
- index.php
- archive.php
- page.php
- single.php
- comments.php
- search.php
- …
home.php
vs
front-page.php
vs
front-page.php
front-page.php
- If exists, the front-page.php template file is used on the site’s front page regardless of whether
Settings > Reading ->Front page displays
is set to “A static page” or “Your latest posts”
home.php
- If exists, will be used for homepage if Settings => Reading is set to “Your latest posts”
- If exists and Settings => Reading is set to “A static page” are set, will be used for blog index page
Custom Page Templates
<?php /* * Template Name: My Page Template Name */ ?>
- use template-{name}.php instead of page-{name}.php
- Example: template-faq.php instead of page-faq.php
Template Hierarchy
- template-faq.php // custom page template
- page-faq.php // page slug
- page-25.php // page id
- page.php
- index.php
- page.php
- page-25.php // page id
- page-faq.php // page slug
My preferences?
In most cases I’m using:
- Custom Page Template for Homepage
- template-homepage.php
- Custom Page Template with WP_Query() for the blog page
- template-blog.php // displays full post
- template-blog-excerpt.php // displays post excerpt
Why?
That’s why
get_template_part()
get_template_part()
<?php get_template_part( 'single',
get_post_format() ); ?>
<?php get_template_part( 'single',
get_post_type() ); ?>
get_template_part() example
<?php get_template_part( 'single', 'aircraft' ); ?>
will do a PHP require() for the first file that exists among these, in this priority:
wp-content/themes/mytheme-child/single-aircraft.php wp-content/themes/mytheme/single-aircraft.php wp-content/themes/mytheme-child/single.php wp-content/themes/mytheme/single.php
Function prefix
style.css:
Text Domain: masonry
Use your text domain for function prefix:
function masonry_setup() {
// Your code here
}
Escape input and output
Reinventing the wheel
Theme Options vs Customizer
WP-PageNavi Support
<?php // WP PageNavi wp_pagenavi(); ?>
MailChimp for WP Support
<?php
if ( function_exists( 'mc4wp_form' ) ) {
mc4wp_form();
}
?>
Contact Form 7 Support
// Footer Text Widget
[contact-form-7 id="224"
title="Footer Contact Form"]
Think about the other people
Translations
function masonry_setup() {
// ******************* Localizations ****************** //
load_theme_textdomain( 'masonry', get_template_directory() .
'/languages' );
// here goes the rest of your code
}
add_action( 'after_setup_theme', 'masonry_setup' );
Create a good parent theme
!important
wp_enqueue_scripts
wp_enqueue_scripts
/** * Theme Name: Masonry Child Theme * Template: masonry */ @import url(../masonry/style.css); /* Masonry Child Theme CSS */
function my_child_theme_scripts() {
// Masonry parent style
wp_enqueue_style( 'masonry-theme-css',
get_template_directory_uri() . '/style.css' );
}
// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
Pluggable functions
if ( ! function_exists( 'masonry_setup' ) ) {
function masonry_setup() {
// Do stuff here
}
}
Theme Customizations
- Use Child Theme
- Again, presentation vs functionality
Extra Tips
wp-config.php stuff
define( 'WP_DEBUG', true );
error_reporting( E_ALL ); ini_set( 'display_errors', 'yes' );
define( 'SCRIPT_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'DISALLOW_FILE_EDIT', true ); // Disable theme/plugin editor
Useful functions
if ( wp_is_mobile() ) {
/* Display and echo mobile specific stuff here */
}
is_front_page(); is_home():is_archive(); is_single(); is_singular(); is_search(); is_page(); // and so on
Useful Plugins
Useful Resources
Mario Peshev: Choosing A WordPress Theme
Thank you!
