10 Steps to Becoming a WordPress Theme Ninja

@tonycecala

10 Steps to Becoming a

WordPress Theme Ninja

Tony CecalaWordPress Consultant

@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”.

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@tonycecala

Choosing a Quality ThemeSome “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

@tonycecala

Why Professional

Developers Choose

Genesis and other

frameworks

Step 10

@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

@tonycecala

Why Professional

Developers Choose

Genesis and other

frameworksGenesis Simple Hooks

Genesis Responsive Slider

Genesis Grid

Step 10

@tonycecala

Thank you.you can find this presentation online at:

http://www.slideshare.net/networker/