The document provides guidance on writing WordPress themes and plugins. It outlines steps for setting up a local development environment, learning HTML and CSS, creating a child theme, building a basic theme from scratch, exploring WordPress hooks, identifying needs for new plugins, and writing plugin code. Specific recommendations include using MAMP or XAMPP for local hosting, Codecademy tutorials for learning web languages, Underscores starter theme, and documenting needs and user steps before writing code.

1. Writing your own Themes and Plugins

2. Stay-at-home mom, business
owner, wife, WordPress
plugin developer, mommy
photographer, reef hobbyist,
sushi lover, nerd
@thestephwells

3. Setup a local server
Install a server (MAMP, WAMP, XAMPP, Desktop server)
https://make.wordpress.org/core/handbook/installing-a-local-server/
Download WordPress and set it up
https://make.wordpress.org/core/handbook/installing-wordpress-locally/
installing-from-a-zip-file/
Get a text editor (Sublime, Notepad ++, TextMate)
For practice: Go to your local server folder (usually htdocs)
and create a “testing” folder with an index.html file inside. Go
to http://localhost/testing to see your blank page.

4. Learn HTML & CSS
Go to CodeAcademy.com and go
through the 7-hour tutorial.

5. Learn HTML & CSS
Practice adding content to the testing/index.html
file you created using your text editor. See the
results at http://localhost/testing
Use FireBug or Chrome developer tools to
inspect a site you like. Make changes here for
experimentation and they’ll be gone when you
refresh the page.

6. Create a Child Theme
A child theme is an easy way to use a theme you
like, and continue getting updates without losing any
of your customizations.

7. Create a Child Theme
Add a new folder to your wordpress/wp-content/
themes folder and create a file called
style.css inside it.
Add the theme header at the beginning of your
style.css, followed by your own CSS.
https://gist.github.com/stephywells (my-child-theme)

8. Create a Theme
Add another folder to your wordpress/wp-content/
themes folder.
Create style.css and index.php files
Add the required header to the style.css (Exclude the
Template: twentyfourteen line)
The index.php must include the HTML structure, the
head, loop, and footer.
https://gist.github.com/stephywells (my-theme)
If you load jQuery, use wp_enqueue_script
Start with the Underscores theme

9. Explore Hooks
A hook allows your plugin to “hook into” WordPress, a
parent theme, or another plugin at a specific time or
place.
Actions vs Filters
https://developer.wordpress.org/reference/
Example: Display Widgets
in_widget_form hook to insert and save options in a
widget
widget_display_callback hook to show and hide the
widget

10. “See a need, fill a need”
Do you find yourself looking for functionality you
can’t find?
Are your clients requesting features for which
there is no solution?
Are you using a plugin that doesn’t ideally meet
your needs?
Do you reuse code for client projects with minor
changes?

11. Write it out
What is the need?
Concisely describe the need you would like to fill.
What makes it different from existing options?
What steps are required to meet this need?
Think through the steps the user will take, and
write down each one. (ie Check a box)
Write down the tasks needed for each user step.
(ie Add a box and save it)

12. Display Widgets
The need: An easy, foolproof way
of choosing which widgets are
shown on the page
The steps required:
Add options to the widgets
Save the options
Hide and show the front-end widgets
add_filter(‘widget_display_callback’, ‘show_dw_widget’);
add_action(‘in_widget_form’, ‘dw_hide_widget_options’,
10, 3);
Need filled in 31 lines of code. Filling a need doesn’t need
to be complicated.

14. Formidable
The (original) need: Separate the HTML from the
content to allow clients to alter the content
without messing with HTML
The steps required:
Back-end forms for collecting data
Save and retrieve data

15. You never know where a
small need may lead.