Best Wordpress Practices to build a Theme from scratch

1. WordPress Beirut 15th Meetup - August
Build a Theme
fb.com/wpbeirut
wpbeirut.org
WhatsApp Group

2. Fadi Zahhar
Modern Full-
Stack Developer

3. Build A ThemeWhat we need
● Development
environment.
● A clean wordpress
installation
● A good text editor
(sublime, Visual Studio)
● Professionals use Cloud9

4. Minimum FilesTo start we need
● Style.css
● index.php
style.css
/*
Theme Name: Build a Theme - Wordpress Beirut
Theme URI: https://github.com/wpbeirut/build-a-theme/
Description: Theme 15th meetup Advanced Theme Templates.
Author: Wordpress Beirut Community Members
Author URI: https://github.com/wpbeirut
Version: 1.0
Text Domain: wpbeirut
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

5. Minimum Files
To start we need
● Style.css
● index.php
index.php
<?php
/* The main index file */
?>
<?php get_header(); ?>
<div class="main">
<div id="content" class="two-thirds left">
<?php get_template_part(
'includes/loop' ); ?>
</div><!-- #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

6. More Theme FilesOther Files not least
● Header.php
● Footer.php
● Sidebar.php
● Archive.php
● Single.php
● Page.php
● Functions.php
get_header() will call the Header.php
get_sidebar() will call the sidebar.php
get_footer() will call the footer.php

7. Methods need to be calledWhat is important in
● Header.php
<?php bloginfo( 'stylesheet_url' ); ?>
<?php wp_head(); ?>
<?php echo site_url( '/' ); ?>
<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>
<?php bloginfo( 'name' ); ?>
<?php bloginfo( 'description' ); ?>
<?php esc_attr_e( 'Skip to content', ‘wpbeirut’); ?>
<?php _e( 'Skip to content', ‘wpbeirut’); ?>

8. Methods need to be called
What is important in
● Footer.php <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
<div class="one-third left widget-area first">
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
</div><!-- .first .widget-area -->
<?php } ?>
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
<div class="one-third left widget-area second">
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
</div><!-- .second .widget-area -->
<?php } ?>
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
<div class="one-third left widget-area third">
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
</div><!-- .third .widget-area -->
<?php } ?>
<?php wp_footer(); ?>

9. Methods need to be calledWhat is important in
● Sidebar.php
<?php if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
<aside class="widget-area">
<?php dynamic_sidebar( 'sidebar-widget-
area' ); ?>
</aside>
<?php } //end of conditional content ?>

10. Methods need to be calledWhat is important in
● functions.php
/* The theme functions file */
/***************************************************************************
*
Theme setup
****************************************************************************
/
/***************************************************************************
*
Register widgets
****************************************************************************
/
/***************************************************************************
*
Register custom post type

11. Theme Setup
What is important in
● functions.php
function wpbeirut_theme_setup() {
// title tags
add_theme_support( 'title-tag' );
// translation
load_theme_textdomain( 'wpbeirut', get_stylesheet_directory() .
'/languages' );
// post formats
add_theme_support( 'post_formats' );
// Post thumbnails or featured images
add_theme_support( 'post-thumbnails', array( 'post', 'page',
'wpbeirut_book' ) );
// RSS feed links to head
add_theme_support( 'automatic-feed-links' );
// navigation menu
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'wpbeirut' )
) );
}
add_action( 'after_setup_theme', 'wpbeirut_theme_setup' );

12. Register Widget
What is important in
● functions.php
function wpbeirut_register_widgets() {
// Sidebar widget area, located in the sidebar. Empty by default.
register_sidebar( array(
'name' => __( 'Sidebar Widget Area', 'tutsplus' ),
'id' => 'sidebar-widget-area',
'description' => __( 'The sidebar widget area', 'tutsplus' ),
'before_widget' => '<div id="%1$s" class="widget-
container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wpbeirut_register_widgets' );

13. Register Widget
What is important in
● functions.php
function wpbeirut_register_post_type() {
// books
$labels = array(
'name' => __( 'Books' ),
'singular_name' => __( 'Books' ),
'add_new' => __( 'New Book' ),
'add_new_item' => __( 'Add New Book' ),
'edit_item' => __( 'Edit Book' ),
'new_item' => __( 'New Book' ),
'view_item' => __( 'View Book' ),
'search_items' => __( 'Search Books' ),
'not_found' => __( 'No Books Found' ),
'not_found_in_trash' => __( 'No Books found in Trash' ),
);
$args = array(
'labels' => $labels,
'has_archive' => true,
'public' => true,
'hierarchical' => false,
'supports' => array(
'title',
'editor',
'thumbnail',
'excerpt',
'custom-fields',
'page-attributes'
),
'taxonomies' => array( 'category' ),
'rewrite' => array( 'slug' => 'book' ),
);
register_post_type( 'wpbeirut_book', $args );
}
add_action( 'init', 'wpbeirut_register_post_type' );

14. Register Custom Taxonomy
What is important in
● functions.php
function wpbeirut_register_taxonomy() {
// genres
$labels = array(
'name' => __( 'Genres' ),
'singular_name' => __( 'Genre' ),
'search_items' => __( 'Search Genres' ),
'all_items' => __( 'All Genres' ),
'edit_item' => __( 'Edit Genres' ),
'update_item' => __( 'Update Genres' ),
'add_new_item' => __( 'Add New Genres' ),
'new_item_name' => __( 'New Genre Name' ),
'menu_name' => __( 'Genres' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'sort' => true,
'args' => array( 'orderby' => 'term_order' ),
'rewrite' => array( 'slug' => 'genre' ),
'show_admin_column' => true
);

15. The Single.phpWhat is important in
● Single.php is dedicated to posts
and posts types in wordpress.
● You can find a condition to
check if the post type is a
custom post type or regular post
type to render the correct loop.
<?php
if( is_singular( 'wpbeirut_book' ) ) {
get_template_part(
'includes/loop', 'book' );
}
else {
get_template_part(
'includes/loop', 'single' );
}
?>

16. The Page.phpWhat is important in
● Page.php is the page that is
dedicated to render the dynamic
pages of wordpress and not post
or post type.
<?php get_template_part( 'includes/loop', 'page'
); ?>

17. Hierarchy Concept
Hierarchy and others
● Archives.php
● Comments.php
● Contact-page.php
● You can find more details about
how to use files names for
theme development on the
following link
https://developer.wordpress.org
/themes/basics/template-
hierarchy/

18. Orientation and the loopOrientation
● For wordpress loops it is
best to put all loops in a
seperate folder known as
includes
● You can write one loop
and extend it by copy
paste and rename each
loop by it purpose
Loop.php
Loop-archive.php
Loop-book.php
Loop-genre.php
Loop-page.php
loop-single.php

19. Let us start our demoLet us start

20. Questions?

21. Thank You.