development with wordpress

Development with WordPress

Themes, Plugins and Widgets

http://kb.vteamslabs.com

By: Tahir Yasin

Agenda

• What is a WordPress theme?• What are necessary files for a theme?• How to create a theme?• What are custom page templates?• What are post types?• How to create custom post types?• How and why to create child themes?• Common mistakes in theme development


Agenda…

• What are Action and Filter Hooks?• Difference between Actions and Filters• How to create a plugin?• Common mistakes in plugin development• How to create a widget?



Typical WP Theme/layout

Necessary files for WP Theme

• style.css• screenshot.png• index.php– header.php– sidebar.php– footer.php


style.css

• Controls the presentation (visual design and layout) of the website pages.


/*Theme Name: Basic Theme ExampleTheme URI: https://github.com/tahiryasin/basic-theme-exampleVersion: 0.1.0Description: Basic theme with minimum files.Author: Tahir YasinAuthor URI: http://about.me/tahiryasinLicense: GPLv2License URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: basic, example, trainingText Domain: basic-theme-example*/

screenshot.png• Snapshot of your theme• Should be present in root folder of theme• Preferred size is 880x660


Template files

• PHP files used to generate requested pages• Include– HTML– PHP– WordPress Template Tags

• index.php is the main template file, this file is also used as a fallback for various template files like page.php, single.php, category.php


functions.php

• This is an optional file but very useful.• Theme specific functions reside in this file• Loaded automatically for both front and

backend• Can enable Sidebars, Navigation Menus, Post

Thumbnails, Post Formats, Custom Headers, Custom Backgrounds and others.


front-page.php

• Used to render homepage• This file will be used in both cases– When homepage shows latest posts– or static page

• Has precedence over home.php


home.php

• Used to render recent posts page• This file will be used– If you are on home page and it shows recent posts– If you on some inner page and the page is set to show

recent post


Custom Page Templates• Used for creating different layouts for different pages• Steps for creating a page template

– Copy page.php– Rename it to whatever you want– Add template name enclosed in PHP comment tags on top the file– Customize it as per your needs

<?php /*

Template Name: YourTemplateNameHere

*/ ?>


Post Types

• WordPress can store and display different types of content

• Default post types– Pages, posts, attachments, revisions, navigation

menu • Stored in same table named wp_posts• Identified by a column called post_type


Custom Post Type

• WordPress is a flexible CMS to introduce new content types


add_action('init', 'wpt_create_post_type');

function wpt_create_post_type(){ register_post_type(‘wpt_product', array( 'labels' => array( 'name' => __('Products'), 'singular_name' => __('Product') ), 'public' => true, 'has_archive' => true, 'taxonomies' => array('category', 'post_tag'), 'supports' => array('title', 'editor', 'custom-fields'), ) );}

Child Themes

• Child themes make upgrade safe themes• Faster development• Learning theme development gets easy


/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */

@import url("../twentyfourteen/style.css");

How to create child theme

• Create a directory named parenttheme-child• If parent theme is avada child theme’s folder name

should be avada-child• Create style.css and put

– Theme Name– Template– Import parent style.css

• Create functions.php• Copy the file from parent to child folder and modify it• Create any new file


Common Mistakes in theming• Not using

– wp_enqueue_style()– wp_enqueue_script()– get_stylesheet_uri()– get_stylesheet_directory()– get_template_directory_uri()– Unique function names– Actions and Filter hooks– the_permalink() & get_the_permalink()

• Using– shortcodes in themes– Creating custom post types in theme


Common Mistakes in theming…

• Not using – add_query_arg()– Builtin jQuery libraries

• Forgetting about wp_head & wp_footer• Forgetting about tinymce image styling• Forgetting about styling 404.php and some other

templates• Forgetting about styling of core widgets• Leaving .zip archive in wp-themes• Making changes directly to premium themes


Action Hooks

• Triggered by specific events– Publishing post, activating plugin, printing scripts

• Hooked function can respond to an event by doing any of the following– Modify database data– Send an email message– Modify what is displayed in the browser screen

(admin or end-user)


Filters Hooks

• Filters manipulate data before it is– Saved to database– Displayed in browser

• We can modify information like– Post Title– Post content– Page title

• Filters site between database and browser


Difference between Actions & Filters

• No difference in functionality• Same function is invoked• add_action is wrapper for add_filter• Context matters– When you want to do some stuff at certain point

of time use Action– Use filters whenever you want to manipulate data

• Filters have a return value but Actions don’t


How to create Plugin

• Choose a unique name• Create a PHP file with a chosen plugin name• Put plugin information header


<?php/** * Plugin Name: Plugin Example * Plugin URI: https://github.com/tahiryasin/plugin-example * Description: A simple plugin that adds a banner at bottom of each page. * Version: 1.0 * Author: Tahir Yasin * Author URI: http://about.me/tahiryasin * License: GPLv2 */

Common Plugin Development Mistakes

• No use of built-in functions– plugins_url()– plugin_dir_url(__FILE__)– plugin_dir_path(__FILE__)

• Using external libraries• Non unique/generic function names• No input sanitization, security and nonces• New database tables


• No uninstall script or function• Adding JS and CSS by hooking admin_head• Using inactive PHP extensions• Bloating code into single file


Common Plugin Development Mistakes …

How to create Widget


add_action('widgets_init', 'wpt_register_widget');

function wpt_register_widget(){ register_widget('WPT_Widget');}

// function to register my widgetclass WPT_Widget extends WP_Widget{ function WPT_Widget(){ } function widget() { } function update() { } function form() { }}

Thank you!

Questions?


development with wordpress

Documents

theme development http

recent post http

type http

880x660 http

easy http

phpfooter http

needs http

custom post types