Writing your own Themes and Plugins

Stay-at-home mom, business

owner, wife, WordPress

plugin developer, mommy

photographer, reef hobbyist,

sushi lover, nerd

@thestephwells

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.

Go to CodeAcademy.com and go

through the 7-hour tutorial.

Learn HTML & CSS

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.

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.

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)

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

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

“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?

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)

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.

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

You never know where a small need may lead.