• 1. Getting started with WordPress development:Tricks to help you codeBy Steve Mortiboy, Semper Fi Web Design
  • 2. Getting StartedLocal development vs Server-based developmentPlugin development vs Theme developmentsemperfiwebdesign.com
  • 3. Local DevelopmentMAMP / WAMPhttp://www.mamp.info/en/http://www.wampserver.com/en/semperfiwebdesign.com
  • 4. Server-based Developmenthttp://codex.wordpress.org/Hosting_WordPressCheap Shared HostingLAMP (Linux, Apache, MySQL, PHP)cPanelDevelopment domainsemperfiwebdesign.com
  • 5. cPanelSet up a sub-domainSet up a databaseMake sure you have your FTP loginsemperfiwebdesign.com
  • 6. Other ToolsFTP Client Software:http://codex.wordpress.org/FTP_ClientsCyberduckFilezillaInterarchy*Transmit*Plain Text Editor:http://codex.wordpress.org/Glossary#Text_editorNotepad++Sublime TextTextMate*semperfiwebdesign.com
  • 7. WordPress File StructureDO NOT TOUCH/wp-admin//wp-includes/Plugins, Themes & Uploads/wp-content//wp-content/plugins//wp-content/themes//wp-content/uploads/semperfiwebdesign.com
  • 8. Creating a Child ThemeParent / Child theme structureParent: /wp-content/themes/responsive/Child: /wp-content/themes/steve-theme/Pick a good parent themehttps://wordpress.org/themes/https://wordpress.org/themes/twentytwelvehttps://wordpress.org/themes/twentythirteenhttps://wordpress.org/themes/responsiveOnly edit the child themesemperfiwebdesign.com
  • 9. Creating a Child Themehttp://codex.wordpress.org/Child_Themesstyle.csssemperfiwebdesign.com
  • 10. CSS Help and Toolshttp://codex.wordpress.org/CSSHelphttp://www.w3schools.com/cssref/http://css-tricks.com/almanac/Toolshttp://getfirebug.com/https://developer.chrome.com/devtoolshttps://developer.mozilla.org/en-US/docs/Tools/Style_Editorsemperfiwebdesign.com
  • 11. Responsive CSSsemperfiwebdesign.com
  • 12. Responsive CSS ToolsChrome Developer Tools:https://developer.chrome.com/devtools/docs/device-modeFirefox Developer Tools:https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Viewsemperfiwebdesign.com
  • 13. Theme Page Templateshttp://codex.wordpress.org/Stepping_Into_Templatessemperfiwebdesign.com
  • 14. Template Hierarchyhttp://codex.wordpress.org/Template_Hierarchysemperfiwebdesign.com
  • 15. Parent Theme FallbackIf a template is called and it’s not in the child theme,WordPress will check to see if the template existsin the parent themeExample:1. The template page.php is called2. If page.php is present in the child theme then that template is used3. If page.php is not present in the child theme but is present in the parent theme then thatsemperfiwebdesign.comtemplate is used4. If page.php is not present in either child or parent theme, then the index.php template inthe child theme is used5. If index.php is not present in the child theme but is present in the parent theme then thattemplate is used
  • 16. Which template is this?The body class method:http://codex.wordpress.org/Function_Reference/body_class<body <?php body_class( $class ); ?>><body class="home page page-id-2 page-template-default">The Debug Bar / Debug Bar Extender method:https://wordpress.org/plugins/debug-bar/https://wordpress.org/plugins/debug-bar-extender/semperfiwebdesign.com
  • 17. The Loophttp://codex.wordpress.org/The_Loop"The Loop" is the main process of WordPress.You use The Loop in your template files to displayposts to visitors.The Loop processes each post to be displayed onthe current page, and formats it according to howit matches specified criteria within The Loop tags.semperfiwebdesign.com
  • 18. The Loophttp://codex.wordpress.org/The_Loop_in_Actionsemperfiwebdesign.comif (have_posts()) :while (have_posts()) :the_post();the_content();endwhile;endif;1. have_posts() checks whether any postswere discovered2. A while loop is started and continues aslong as have_posts() returns true3. the_post() takes the current item in thecollection of posts and makes it availablefor use inside The Loop4. the_content() template tag fetches thecontent of the post, filters it, and thendisplays it5. endwhile ends the while loop6. endif ends the check for posts
  • 19. The LoopSome code must be placed outside the loopSome code must be placed inside the loopExample:the_title(); displays the title of the post,to do this it must run inside the loophttp://codex.wordpress.org/Function_Reference/the_titlesemperfiwebdesign.com
  • 20. Template Tagshttp://codex.wordpress.org/Template_TagsTemplate tags are used within theme template filesTemplate tags instruct WordPress to do somethingExample:the_date(); displays the date of the postThis template tag accepts parameters such as$format – the format of the date$before – text to display before the date$after – text to display after the datehttp://codex.wordpress.org/Function_Reference/the_datesemperfiwebdesign.com
  • 21. Theme Functionshttp://codex.wordpress.org/Functions_File_ExplainedThe functions file behaves like a WordPress Plugin,adding features and functionality to a WordPresssite.You can use it to call existing functions, and todefine your own functions.The functions file in a child theme can augment orreplace the parent theme’s functions file.semperfiwebdesign.com
  • 22. WordPress API - Actionshttp://codex.wordpress.org/Plugin_API/Action_ReferenceActions are triggered by specific events that take place in WordPress, such aspublishing a post, changing themes, or displaying an administration screen. AnAction is a custom PHP function defined in your plugin or them) and hooked, i.e. setto respond, to some of these events.The basic steps to make this happen are:1. Create a PHP function that should execute when a specific WordPress event occurs2. Hook this function to the event by using the add_action() function3. Put your PHP function in a plugin file or your theme functions filesemperfiwebdesign.com
  • 23. WordPress API - Filtershttp://codex.wordpress.org/Plugin_API/Filter_ReferenceFilters are functions that WordPress passes data through, just before taking someaction with the data (such as adding it to the database or sending it to the browser).Filters sit between the database and the browser, and between the browser and thedatabase. Most input and output in WordPress passes through at least one filter.The basic steps to make this happen are:1. Create the PHP function that filters the data2. Hook to the filter in WordPress, by calling add_filter()3. Put your PHP function in a plugin file or your theme functions filesemperfiwebdesign.com
  • 24. Conditional Tagshttp://codex.wordpress.org/Conditional_TagsConditional Tags can be used in your theme templatefiles to change what is displayed on a particular pagedepending on whether the condition matches.Example:This code will output the Site Title in an H1 on the front page<?php if ( is_front_page() ) { ?><h1><?php bloginfo('name'); ?></h1><?php } else {//display something else} ?>semperfiwebdesign.com
  • 25. Debugging in WordPresshttp://codex.wordpress.org/Debugging_in_WordPressWP_DEBUGdefine('WP_DEBUG', true);WP_DEBUG_LOGdefine('WP_DEBUG_LOG', true);Logs to /wp-content/debug.logWP_DEBUG_DISPLAYdefine('WP_DEBUG_DISPLAY', false);semperfiwebdesign.com
  • 26. Plugins for DebuggingDebug Bar:https://wordpress.org/plugins/debug-bar/Debug Bar Extender:https://wordpress.org/plugins/debug-bar-extender/Query Monitor:https://wordpress.org/plugins/query-monitor/semperfiwebdesign.com
  • 27. Oh No! Fatal Errorhttp://codex.wordpress.org/Common_WordPress_Errors#Specific_Error_MessagesFatal error: Call to undefined function my_function() in/home/mysite/public_html/wp-content/themes/mytheme/functions.phpon line 12Fatal error: Cannot redeclare post_meta_function() (previouslydeclared in /home/mysite/public_html/wp-content/themes/responsive/functions.php:114) in/home/mysite/public_html/wp-content/themes/mytheme/functions.phpon line 26Fatal error: Allowed memory size of 67108864 bytes exhausted (tried toallocate 17472 bytes) in /home/mysite/public_html/wp-content/plugins/myplugin/class.php on line 198semperfiwebdesign.com
  • 28. The White Screen of Deathhttp://codex.wordpress.org/Common_WordPress_Errors#The_White_Screen_of_Death1. Don’t panic2. Disable all plugins3. Deactivate your theme4. Enable WP_DEBUG and WP_DEBUG_LOG5. Check the log files6. Ask for helpsemperfiwebdesign.com
  • 29. Creating a Themehttp://codex.wordpress.org/Theme_DevelopmentUse a good starter theme(Twenty Twelve / Twenty Thirteen)Adapt code, don’t start from scratchObey the coding standardshttps://make.wordpress.org/core/handbook/coding-standards/Use the WordPress testing toolshttp://codex.wordpress.org/Theme_Development#Theme_Testing_Processsemperfiwebdesign.com
  • 30. Creating a Pluginhttp://codex.wordpress.org/Writing_a_PluginStart smallhttps://wordpress.org/plugins/hello-dolly/Get to know the APIhttps://developer.wordpress.org/reference/Obey the coding standardshttps://make.wordpress.org/core/handbook/coding-standards/Use unique function namesfunction steve_function_name()Ask for help!https://wordpress.org/support/semperfiwebdesign.com
  • 31. Developer Resourceshttps://wordpress.org/support/https://codex.wordpress.org/http://codex.wordpress.org/Developer_Documentationhttps://developer.wordpress.org/reference/https://make.wordpress.org/https://developer.wordpress.org/http://wordpress.tv/http://stackoverflow.com/https://google.com/semperfiwebdesign.com
  • 32. • Support• Security• Performance• Development• Design• SEO
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    Getting started with WordPress development

    by steve-mortiboy

    on

    Report

    Category:

    Internet

    Download: 0

    Comment: 0

    371

    views

    Comments

    Description

    Presentation from WordCamp Raleigh 2014 on November 9th about Getting started with WordPress development
    Download Getting started with WordPress development

    Transcript

    • 1. Getting started with WordPress development:Tricks to help you codeBy Steve Mortiboy, Semper Fi Web Design
  • 2. Getting StartedLocal development vs Server-based developmentPlugin development vs Theme developmentsemperfiwebdesign.com
  • 3. Local DevelopmentMAMP / WAMPhttp://www.mamp.info/en/http://www.wampserver.com/en/semperfiwebdesign.com
  • 4. Server-based Developmenthttp://codex.wordpress.org/Hosting_WordPressCheap Shared HostingLAMP (Linux, Apache, MySQL, PHP)cPanelDevelopment domainsemperfiwebdesign.com
  • 5. cPanelSet up a sub-domainSet up a databaseMake sure you have your FTP loginsemperfiwebdesign.com
  • 6. Other ToolsFTP Client Software:http://codex.wordpress.org/FTP_ClientsCyberduckFilezillaInterarchy*Transmit*Plain Text Editor:http://codex.wordpress.org/Glossary#Text_editorNotepad++Sublime TextTextMate*semperfiwebdesign.com
  • 7. WordPress File StructureDO NOT TOUCH/wp-admin//wp-includes/Plugins, Themes & Uploads/wp-content//wp-content/plugins//wp-content/themes//wp-content/uploads/semperfiwebdesign.com
  • 8. Creating a Child ThemeParent / Child theme structureParent: /wp-content/themes/responsive/Child: /wp-content/themes/steve-theme/Pick a good parent themehttps://wordpress.org/themes/https://wordpress.org/themes/twentytwelvehttps://wordpress.org/themes/twentythirteenhttps://wordpress.org/themes/responsiveOnly edit the child themesemperfiwebdesign.com
  • 9. Creating a Child Themehttp://codex.wordpress.org/Child_Themesstyle.csssemperfiwebdesign.com
  • 10. CSS Help and Toolshttp://codex.wordpress.org/CSSHelphttp://www.w3schools.com/cssref/http://css-tricks.com/almanac/Toolshttp://getfirebug.com/https://developer.chrome.com/devtoolshttps://developer.mozilla.org/en-US/docs/Tools/Style_Editorsemperfiwebdesign.com
  • 11. Responsive CSSsemperfiwebdesign.com
  • 12. Responsive CSS ToolsChrome Developer Tools:https://developer.chrome.com/devtools/docs/device-modeFirefox Developer Tools:https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Viewsemperfiwebdesign.com
  • 13. Theme Page Templateshttp://codex.wordpress.org/Stepping_Into_Templatessemperfiwebdesign.com
  • 14. Template Hierarchyhttp://codex.wordpress.org/Template_Hierarchysemperfiwebdesign.com
  • 15. Parent Theme FallbackIf a template is called and it’s not in the child theme,WordPress will check to see if the template existsin the parent themeExample:1. The template page.php is called2. If page.php is present in the child theme then that template is used3. If page.php is not present in the child theme but is present in the parent theme then thatsemperfiwebdesign.comtemplate is used4. If page.php is not present in either child or parent theme, then the index.php template inthe child theme is used5. If index.php is not present in the child theme but is present in the parent theme then thattemplate is used
  • 16. Which template is this?The body class method:http://codex.wordpress.org/Function_Reference/body_class<body <?php body_class( $class ); ?>><body class="home page page-id-2 page-template-default">The Debug Bar / Debug Bar Extender method:https://wordpress.org/plugins/debug-bar/https://wordpress.org/plugins/debug-bar-extender/semperfiwebdesign.com
  • 17. The Loophttp://codex.wordpress.org/The_Loop"The Loop" is the main process of WordPress.You use The Loop in your template files to displayposts to visitors.The Loop processes each post to be displayed onthe current page, and formats it according to howit matches specified criteria within The Loop tags.semperfiwebdesign.com
  • 18. The Loophttp://codex.wordpress.org/The_Loop_in_Actionsemperfiwebdesign.comif (have_posts()) :while (have_posts()) :the_post();the_content();endwhile;endif;1. have_posts() checks whether any postswere discovered2. A while loop is started and continues aslong as have_posts() returns true3. the_post() takes the current item in thecollection of posts and makes it availablefor use inside The Loop4. the_content() template tag fetches thecontent of the post, filters it, and thendisplays it5. endwhile ends the while loop6. endif ends the check for posts
  • 19. The LoopSome code must be placed outside the loopSome code must be placed inside the loopExample:the_title(); displays the title of the post,to do this it must run inside the loophttp://codex.wordpress.org/Function_Reference/the_titlesemperfiwebdesign.com
  • 20. Template Tagshttp://codex.wordpress.org/Template_TagsTemplate tags are used within theme template filesTemplate tags instruct WordPress to do somethingExample:the_date(); displays the date of the postThis template tag accepts parameters such as$format – the format of the date$before – text to display before the date$after – text to display after the datehttp://codex.wordpress.org/Function_Reference/the_datesemperfiwebdesign.com
  • 21. Theme Functionshttp://codex.wordpress.org/Functions_File_ExplainedThe functions file behaves like a WordPress Plugin,adding features and functionality to a WordPresssite.You can use it to call existing functions, and todefine your own functions.The functions file in a child theme can augment orreplace the parent theme’s functions file.semperfiwebdesign.com
  • 22. WordPress API - Actionshttp://codex.wordpress.org/Plugin_API/Action_ReferenceActions are triggered by specific events that take place in WordPress, such aspublishing a post, changing themes, or displaying an administration screen. AnAction is a custom PHP function defined in your plugin or them) and hooked, i.e. setto respond, to some of these events.The basic steps to make this happen are:1. Create a PHP function that should execute when a specific WordPress event occurs2. Hook this function to the event by using the add_action() function3. Put your PHP function in a plugin file or your theme functions filesemperfiwebdesign.com
  • 23. WordPress API - Filtershttp://codex.wordpress.org/Plugin_API/Filter_ReferenceFilters are functions that WordPress passes data through, just before taking someaction with the data (such as adding it to the database or sending it to the browser).Filters sit between the database and the browser, and between the browser and thedatabase. Most input and output in WordPress passes through at least one filter.The basic steps to make this happen are:1. Create the PHP function that filters the data2. Hook to the filter in WordPress, by calling add_filter()3. Put your PHP function in a plugin file or your theme functions filesemperfiwebdesign.com
  • 24. Conditional Tagshttp://codex.wordpress.org/Conditional_TagsConditional Tags can be used in your theme templatefiles to change what is displayed on a particular pagedepending on whether the condition matches.Example:This code will output the Site Title in an H1 on the front page<?php if ( is_front_page() ) { ?><h1><?php bloginfo('name'); ?></h1><?php } else {//display something else} ?>semperfiwebdesign.com
  • 25. Debugging in WordPresshttp://codex.wordpress.org/Debugging_in_WordPressWP_DEBUGdefine('WP_DEBUG', true);WP_DEBUG_LOGdefine('WP_DEBUG_LOG', true);Logs to /wp-content/debug.logWP_DEBUG_DISPLAYdefine('WP_DEBUG_DISPLAY', false);semperfiwebdesign.com
  • 26. Plugins for DebuggingDebug Bar:https://wordpress.org/plugins/debug-bar/Debug Bar Extender:https://wordpress.org/plugins/debug-bar-extender/Query Monitor:https://wordpress.org/plugins/query-monitor/semperfiwebdesign.com
  • 27. Oh No! Fatal Errorhttp://codex.wordpress.org/Common_WordPress_Errors#Specific_Error_MessagesFatal error: Call to undefined function my_function() in/home/mysite/public_html/wp-content/themes/mytheme/functions.phpon line 12Fatal error: Cannot redeclare post_meta_function() (previouslydeclared in /home/mysite/public_html/wp-content/themes/responsive/functions.php:114) in/home/mysite/public_html/wp-content/themes/mytheme/functions.phpon line 26Fatal error: Allowed memory size of 67108864 bytes exhausted (tried toallocate 17472 bytes) in /home/mysite/public_html/wp-content/plugins/myplugin/class.php on line 198semperfiwebdesign.com
  • 28. The White Screen of Deathhttp://codex.wordpress.org/Common_WordPress_Errors#The_White_Screen_of_Death1. Don’t panic2. Disable all plugins3. Deactivate your theme4. Enable WP_DEBUG and WP_DEBUG_LOG5. Check the log files6. Ask for helpsemperfiwebdesign.com
  • 29. Creating a Themehttp://codex.wordpress.org/Theme_DevelopmentUse a good starter theme(Twenty Twelve / Twenty Thirteen)Adapt code, don’t start from scratchObey the coding standardshttps://make.wordpress.org/core/handbook/coding-standards/Use the WordPress testing toolshttp://codex.wordpress.org/Theme_Development#Theme_Testing_Processsemperfiwebdesign.com
  • 30. Creating a Pluginhttp://codex.wordpress.org/Writing_a_PluginStart smallhttps://wordpress.org/plugins/hello-dolly/Get to know the APIhttps://developer.wordpress.org/reference/Obey the coding standardshttps://make.wordpress.org/core/handbook/coding-standards/Use unique function namesfunction steve_function_name()Ask for help!https://wordpress.org/support/semperfiwebdesign.com
  • 31. Developer Resourceshttps://wordpress.org/support/https://codex.wordpress.org/http://codex.wordpress.org/Developer_Documentationhttps://developer.wordpress.org/reference/https://make.wordpress.org/https://developer.wordpress.org/http://wordpress.tv/http://stackoverflow.com/https://google.com/semperfiwebdesign.com
  • 32. • Support• Security• Performance• Development• Design• SEO
  • Fly UP