This document discusses 10 steps to becoming a WordPress theme ninja. It provides tips on customizing themes to match client brand colors through child themes or CSS plugins. It recommends learning CSS and a theme's functions.php file. Online tutorials, theme hooks, and plugins are suggested to modify themes and add functionality. Choosing high-quality, well-coded themes that allow overrides is advised. Frameworks like Genesis are popular due to their libraries, tutorials, and support.

1. @tonycecala
10 Steps to Becoming a
WordPress Theme Ninja
Tony Cecala
WordPress Consultant

2. @tonycecala
What are characteristics of
Theme Ninja?
Owns a Satchel of the Powerful Tools.
Is an Expert at discovering hidden knowledge.
Owns the Keys to Cherished Theme Repositories
Knows CSS Dark arts.
Has a Black Belt in “functions.php”.

3. @tonycecala
How do you transform a theme
match your client’s brand colors?
Answer: Edit the original CSS file.
Situation: Your edits gets overwritten
when an update gets pushed out for the
Theme.
Step 1

4. @tonycecala
How do you transform a theme
match your client’s brand colors?
Solution 1: Edit the theme within the
Theme Customize menu.
Step 1

5. @tonycecala
How do you transform a theme
match your client’s brand colors?
Solution 2: Create a Child Theme. Only a
few lines of code.
style.css
functions.php
https://codex.wordpress.org/Child_Themes
Step 1

6. @tonycecala
How do you transform a theme
match your client’s brand colors?
Solution 3: Use an internal Admin based
CSS editing plugin like Simple Custom CSS
https://wordpress.org/plugins/simple-custom-css/
Step 1

7. @tonycecala
Master the sidebar and widgets,
Young Ninja. You must.
Sidebars are simply pieces of PHP code
called on a page.
You can generally show and hide sidebars in
Theme options settings in Genesis, and
Elegant Themes.
Step 2

8. @tonycecala
Master the Sidebar and Widgets,
Young Ninja.
Hide sidebars using CSS or PHP code
Add new sidebars with plugins
https://wordpress.org/plugins/sidebar-manager-light/
Add and relocate sidebars in the theme files
and functions.php file
Step 2

9. @tonycecala
Use the Browser (and browser
extensions) for good, not evil.
“Inspect Element” is your friend
Identify and tweak HTML elements on the
webpage
Step 3

10. @tonycecala
Use the Browser (and browser
extensions) for good, not evil.
Console is an often overlooked browser tool
that highlights any HTML/javascript errors that
keep the site from working. (404 errors on
scripts, fonts, non-loading jquery scripts.)
Step 3

11. @tonycecala
Discover the
Secret Superpowers of CSS
Most WordPress themes have a general
stylesheet called style.css that makes the
theme look and feel the way it does.
Become familiar with your theme’s style code
and you'll learn how to restyle the theme to
match your vision or your client’s brand
Step 4

12. @tonycecala
Discover the
Secret Superpowers of CSS
Restyle the entire theme with the new fonts,
from body to H1 to List elements, you can
change the look and feel with some simple
CSS overrides. You can buy Webfonts and
install them in a site directory for easy
access and usage.
Step 4

13. @tonycecala
Discover the
Secret Superpowers of CSS
Web font’s have come a long way and it is
easy to install a Google Font:
<link
href='http://fonts.googleapis.com/css?family
=Halant:400|Oswald' rel='stylesheet'
type=‘text/css'>
h1 {font-family: 'Halant', Georgia, serif;}
Step 5

14. @tonycecala
Embrace the Dark Side of your
Theme’s “functions.php” file
"functions.php" file performs functions that
add and remove sections from a WordPress
site, and filter/transform text in Posts/Pages.
Step 5

15. @tonycecala
Embrace the Dark Side of your
Theme’s “functions.php” file
Find libraries of code snippets online that
transform pages with powerful ease.
The plugin Code Snippets lets you add
powerful code snippets to a site without
needing PHP editing mad skillz.
https://wordpress.org/plugins/code-snippets/
Step 5

16. @tonycecala
Use Online Tutorials
Online tutorials that precisely describe how to
modify your theme to overcome limitations
and look professional and unique are widely
available. Most are free, others require a
subscription. There are many Genesis
tutorials available.
Step 6

17. @tonycecala
Use Theme Hooks
Theme frameworks often have “theme
hooks” that add/remove information to
your page.
Understand how theme hooks work,
and you can move & add entire sections
of your page.
Step 7

18. @tonycecala
Use Plugins
Some plugins can give you theme-
editing superpowers that you never
imagined were possible.
Responsive Menu will make your
mobile site look and feel like an App.
https://wordpress.org/plugins/responsive-
menu/
Step 8

19. @tonycecala
Use Plugins
Menu Swapper will let you substitute
entire menus based on what page is displayed,
or other parameters.
https://wordpress.org/plugins/menu-swapper/
Step 8

20. @tonycecala
Use Plugins
Widget Logic lets you show
and hide Widgets based on
page types and other if/then
rules
https://wordpress.org/plugins/
widget-logic/
Step 8

21. @tonycecala
Choosing a Quality Theme
Some “point and
click” themes are very
well coded. They give
you the power to
make color changes
and style changes
with simple options
screens.
Others will bring you
headaches down the
line because their
PHP driven code will
add styles directly into
the HTML, making it
almost impossible to
override the style.
Step 9

22. @tonycecala
Why Professional
Developers Choose
Genesis and other
frameworks
Step 10

23. @tonycecala
Genesis and other frameworks are popular
among WordPress consultants they feature:
a deep library of plugins
tutorials and code snippets
online support
Step 10Why Professional
Developers Choose
Genesis and other
frameworks

24. @tonycecala
Why Professional
Developers Choose
Genesis and other
frameworksGenesis Simple Hooks
Genesis Responsive Slider
Genesis Grid
Step 10

25. @tonycecala
Thank you.
you can find this presentation online at:
http://www.slideshare.net/networker/