Embed Size (px)
DESCRIPTION
Presentation from WordCamp Raleigh 2014 on November 9th about Getting started with WordPress development
Citation preview
Getting started with WordPress development:Tricks to help you code
By Steve Mortiboy, Semper Fi Web Design
semperfiwebdesign.com
Getting Started
Local development vs Server-based development
Plugin development vs Theme development
semperfiwebdesign.com
Local Development
MAMP / WAMP
http://www.mamp.info/en/
http://www.wampserver.com/en/
semperfiwebdesign.com
Server-based Developmenthttp://codex.wordpress.org/Hosting_WordPress
Cheap Shared Hosting
LAMP (Linux, Apache, MySQL, PHP)
cPanel
Development domain
semperfiwebdesign.com
cPanel
Set up a database
Set up a sub-domain
Make sure you have your FTP login
semperfiwebdesign.com
Other Tools
FTP Client Software:http://codex.wordpress.org/FTP_Clients
Cyberduck
Filezilla
Interarchy*
Transmit*
Plain Text Editor:http://codex.wordpress.org/Glossary#Text_editor
Notepad++
Sublime Text
TextMate*
semperfiwebdesign.com
WordPress File Structure
DO NOT TOUCH
/wp-admin/
/wp-includes/
Plugins, Themes & Uploads
/wp-content/
/wp-content/plugins/
/wp-content/themes/
/wp-content/uploads/
semperfiwebdesign.com
Creating a Child Theme
Parent / Child theme structure
Parent: /wp-content/themes/responsive/
Child: /wp-content/themes/steve-theme/
Pick a good parent theme
https://wordpress.org/themes/
https://wordpress.org/themes/twentytwelve
https://wordpress.org/themes/twentythirteen
https://wordpress.org/themes/responsive
Only edit the child theme
semperfiwebdesign.com
Creating a Child Themehttp://codex.wordpress.org/Child_Themes
style.css
semperfiwebdesign.com
CSS Help and Toolshttp://codex.wordpress.org/CSS
Help
http://www.w3schools.com/cssref/
http://css-tricks.com/almanac/
Tools
http://getfirebug.com/
https://developer.chrome.com/devtools
https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
semperfiwebdesign.com
Responsive CSS
semperfiwebdesign.com
Responsive CSS Tools
Chrome Developer Tools:https://developer.chrome.com/devtools/docs/device-mode
Firefox Developer Tools:https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
semperfiwebdesign.com
Theme Page Templateshttp://codex.wordpress.org/Stepping_Into_Templates
semperfiwebdesign.com
Template Hierarchyhttp://codex.wordpress.org/Template_Hierarchy
semperfiwebdesign.com
Parent Theme Fallback
If a template is called and it’s not in the child theme,
WordPress will check to see if the template exists
in the parent theme
Example:
1. The template page.php is called
2. If page.php is present in the child theme then that template is used
3. If page.php is not present in the child theme but is present in the parent theme then that
template is used
4. If page.php is not present in either child or parent theme, then the index.php template in
the child theme is used
5. If index.php is not present in the child theme but is present in the parent theme then that
template is used
semperfiwebdesign.com
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
The Loophttp://codex.wordpress.org/The_Loop
"The Loop" is the main process of WordPress.
You use The Loop in your template files to display
posts to visitors.
The Loop processes each post to be displayed on
the current page, and formats it according to how
it matches specified criteria within The Loop tags.
semperfiwebdesign.com
The Loophttp://codex.wordpress.org/The_Loop_in_Action
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
1. have_posts() checks whether any posts
were discovered
2. A while loop is started and continues as
long as have_posts() returns true
3. the_post() takes the current item in the
collection of posts and makes it available
for use inside The Loop
4. the_content() template tag fetches the
content of the post, filters it, and then
displays it
5. endwhile ends the while loop
6. endif ends the check for posts
semperfiwebdesign.com
The Loop
Some code must be placed outside the loop
Some code must be placed inside the loop
Example:the_title(); displays the title of the post,
to do this it must run inside the loop
http://codex.wordpress.org/Function_Reference/the_title
semperfiwebdesign.com
Template Tagshttp://codex.wordpress.org/Template_Tags
Template tags are used within theme template files
Template tags instruct WordPress to do something
Example:the_date(); displays the date of the post
This 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 date
http://codex.wordpress.org/Function_Reference/the_date
semperfiwebdesign.com
Theme Functionshttp://codex.wordpress.org/Functions_File_Explained
The functions file behaves like a WordPress Plugin,
adding features and functionality to a WordPress
site.
You can use it to call existing functions, and to
define your own functions.
The functions file in a child theme can augment or
replace the parent theme’s functions file.
semperfiwebdesign.com
WordPress API - Actions http://codex.wordpress.org/Plugin_API/Action_Reference
Actions are triggered by specific events that take place in WordPress, such as
publishing a post, changing themes, or displaying an administration screen. An
Action is a custom PHP function defined in your plugin or them) and hooked, i.e. set
to 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 occurs
2. Hook this function to the event by using the add_action() function
3. Put your PHP function in a plugin file or your theme functions file
semperfiwebdesign.com
WordPress API - Filtershttp://codex.wordpress.org/Plugin_API/Filter_Reference
Filters are functions that WordPress passes data through, just before taking some
action 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 the
database. 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 data
2. Hook to the filter in WordPress, by calling add_filter()
3. Put your PHP function in a plugin file or your theme functions file
semperfiwebdesign.com
Conditional Tagshttp://codex.wordpress.org/Conditional_Tags
Conditional Tags can be used in your theme template
files to change what is displayed on a particular page
depending 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
Debugging in WordPresshttp://codex.wordpress.org/Debugging_in_WordPress
WP_DEBUGdefine('WP_DEBUG', true);
WP_DEBUG_LOGdefine('WP_DEBUG_LOG', true);
Logs to /wp-content/debug.log
WP_DEBUG_DISPLAYdefine('WP_DEBUG_DISPLAY', false);
semperfiwebdesign.com
Plugins for Debugging
Debug 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
Oh No! Fatal Errorhttp://codex.wordpress.org/Common_WordPress_Errors#Specific_Error_Messages
Fatal error: Call to undefined function my_function() in
/home/mysite/public_html/wp-content/themes/mytheme/functions.php
on line 12
Fatal error: Cannot redeclare post_meta_function() (previously
declared in /home/mysite/public_html/wp-
content/themes/responsive/functions.php:114) in
/home/mysite/public_html/wp-content/themes/mytheme/functions.php
on line 26
Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to
allocate 17472 bytes) in /home/mysite/public_html/wp-
content/plugins/myplugin/class.php on line 198
semperfiwebdesign.com
The White Screen of Deathhttp://codex.wordpress.org/Common_WordPress_Errors#The_White_Screen_of_Death
1. Don’t panic
2. Disable all plugins
3. Deactivate your theme
4. Enable WP_DEBUG and WP_DEBUG_LOG
5. Check the log files
6. Ask for help
semperfiwebdesign.com
Creating a Themehttp://codex.wordpress.org/Theme_Development
Use a good starter theme(Twenty Twelve / Twenty Thirteen)
Adapt code, don’t start from scratch
Obey the coding standardshttps://make.wordpress.org/core/handbook/coding-standards/
Use the WordPress testing toolshttp://codex.wordpress.org/Theme_Development#Theme_Testing_Process
semperfiwebdesign.com
Creating a Pluginhttp://codex.wordpress.org/Writing_a_Plugin
Start 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
Developer Resources
https://wordpress.org/support/
https://codex.wordpress.org/
http://codex.wordpress.org/Developer_Documentation
https://developer.wordpress.org/reference/
https://make.wordpress.org/
https://developer.wordpress.org/
http://wordpress.tv/
http://stackoverflow.com/
https://google.com/
• Support
• Security
• Performance
• Development
• Design
• SEO
![Skaffold - storage.googleapis.com · [getting-started getting-started] Hello world! [getting-started getting-started] Hello world! [getting-started getting-started] Hello world! 5](https://img.pdfslide.us/doc/110x75/5ec939f2a76a033f091c5ac7/skaffold-getting-started-getting-started-hello-world-getting-started-getting-started.jpg)
