1 / 26

Development with WordPress

Development with WordPress. Themes, Plugins and Widgets. 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?

baruch
Download Presentation

Development with WordPress

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Development with WordPress Themes, Plugins and Widgets • By: TahirYasin http://kb.vteamslabs.com

  2. 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

  3. 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

  4. Typical WP Theme/layout http://kb.vteamslabs.com

  5. Necessary files for WP Theme • style.css • screenshot.png • index.php • header.php • sidebar.php • footer.php http://kb.vteamslabs.com

  6. style.css • Controls the presentation (visual design and layout) of the website pages. /* Theme Name: Basic Theme Example Theme URI: https://github.com/tahiryasin/basic-theme-example Version: 0.1.0 Description: Basic theme with minimum files. Author: TahirYasin Author URI: http://about.me/tahiryasinLicense: GPLv2 License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: basic, example, training Text Domain: basic-theme-example */ http://kb.vteamslabs.com

  7. screenshot.png • Snapshot of your theme • Should be present in root folder of theme • Preferred size is 880x660 http://kb.vteamslabs.com

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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'), • ) • ); • } http://kb.vteamslabs.com

  15. 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"); http://kb.vteamslabs.com

  16. 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

  17. 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

  18. Common Mistakes in theming… • Not using • add_query_arg() • BuiltinjQuery 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

  19. 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

  20. 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

  21. 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

  22. 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: TahirYasin * Author URI: http://about.me/tahiryasin * License: GPLv2 */ http://kb.vteamslabs.com

  23. 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

  24. Common Plugin Development Mistakes … • 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

  25. How to create Widget add_action('widgets_init', 'wpt_register_widget'); function wpt_register_widget() { register_widget('WPT_Widget'); } // function to register my widget class WPT_Widgetextends WP_Widget { function WPT_Widget(){ } function widget() { } function update() { } function form() { } } http://kb.vteamslabs.com

  26. Thank you! Questions? http://kb.vteamslabs.com

More Related