Getting started with WordPress development

  • CategoryInternet

  • View371

Report
  • 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
  • Description
    Presentation from WordCamp Raleigh 2014 on November 9th about Getting started with WordPress development