WordPress Themes – the good stuff :)

Stanko Metodiev

 

 

Stanko-Metodiev

Before we start

 

 

How many of you are:

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

Famous-characters-Troll-face-Troll-face-poker-45046

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

… because It’s easier to be/to start with the negative :)))

Presentation vs Functionality

 

 

Bundled Scripts

 

 

Bundled Plugins

 

 

Custom Post Types

 

 

Don’t use query_posts()

zxl58Pv

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

bad-theme-template

No comment!

 

 

required-display-none

Seriously!?

seriously meme

Do’s

Presentation vs Functionality (again)

 

 

WordPress Coding Standards

 

 

Theme Unit Test

 

 

WordPress Theme Unit Tests

 

youre-just-a-nerd

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

 

 

 

 

home.php
vs
front-page.php

front-page.php

 

 

home.php

 

 

Custom Page Templates

 

 

<?php 
/* 
* Template Name: My Page Template Name
*/
?>

Template Hierarchy

 

 

 

My preferences?

 

 

In most cases I’m using:

Why?

file

That’s why

Stanko_Metodiev

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

 

 

masonry-customizer

WP-PageNavi Support

 

 

<?php
// WP PageNavi 
wp_pagenavi();
?>

 

wp-page-navi

MailChimp for WP Support

 

 

<?php
if ( function_exists( 'mc4wp_form' ) ) { 
    mc4wp_form(); 
}
?>

mailchimp-for-wp

Contact Form 7 Support

 

 

// Footer Text Widget
[contact-form-7 id="224" 
    title="Footer Contact Form"]

contact-form-7-and-mailchimp-for-wp

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' );

How to translate a WordPress theme

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

 

 

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 wp-config.php stuff

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

Example of Browser and OS body class function

Useful Plugins

 

 

Useful Resources

 

 

Mario Peshev: Choosing A WordPress Theme

 

 

 

Thank you!

 

 

 

 

 

 

 

 

 

 

 

 

 

Stanko Metodiev

askMeAnything