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

http://kb.vteamslabs.com

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?

http://kb.vteamslabs.com

http://kb.vteamslabs.com

Typical WP Theme/layout

Necessary files for WP Theme

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

http://kb.vteamslabs.com

style.css

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

http://kb.vteamslabs.com

/*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

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

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.

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

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

*/ ?>

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

Custom Post Type

• WordPress is a flexible CMS to introduce new content types

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

/* 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

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

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)

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

How to create Plugin

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

http://kb.vteamslabs.com

<?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

http://kb.vteamslabs.com

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

http://kb.vteamslabs.com

Common Plugin Development Mistakes …

How to create Widget

http://kb.vteamslabs.com

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?

http://kb.vteamslabs.com