Translating WordPress themes and plugins WordCamp Bhopal 2015
Writing your own WordPress themes and plugins
-
Upload
stephywells -
Category
Technology
-
view
138 -
download
1
description
Transcript of Writing your own WordPress themes and plugins
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.