wordpress theme mechanics

WordPress Theme MechanicsBecause sometimes you need to look under the hood

Common Challenges

• Change fonts and typography? (font size, font color, font face, line spacing).

• Change the background color on a page.

• Customize the theme header (or footer).

• Modify the site layout - change column widths, margins, padding.

In Today’s Webinar

• How WordPress works (conceptually).

• Understanding the WordPress template system.

• Customizing your theme the CSS way.

• How to make a child theme.

• Almost no PHP.

My Assumptions

• You know a little about WordPress

• Adding posts and pages

• Installing and activating plugins and themes

• You have some very basic knowledge of common web terminology

• Primarily HTML & CSS

How WordPress Works

What are the limits ofWordPress Themes??

What are the limits of HTML and CSS?

With just a little bit of JavaScript?

Anything is possible*

* when you know the secrets

of the WP theme system

(and HTML and CSS)

Theme Secrets Revealed

Inside the Theme Folder

Decoding the Template System

Home | About | Contact Us

Site NameSite tagline

Privacy Policy * Terms of Service * Copyright

Post TitlePost Date * Post Author

Dynamically aggregate resource-leveling architectures vis-a-vis cutting-edge systems. Enthusiastically drive parallel value rather than team building growth strategies. Interactively pursue functional meta-services rather than frictionless technology. Authoritatively strategize proactive vortals via cross-media web-readiness. Assertively communicate flexible benefits via magnetic deliverables.

Synergistically customize team driven leadership for frictionless vortals. Interactively leverage other's process-centric collaboration and idea-sharing for excellent channels. Proactively unleash premium leadership skills before market-driven information. Seamlessly brand equity invested networks via front-end e-business. Seamlessly maintain economically sound schemas with 24/7 opportunities.

Holisticly provide access to worldwide ideas without intuitive content. Dynamically myocardinate front-end benefits with clicks-and-mortar models. Conveniently pontificate professional technology and extensive systems. Energistically brand flexible customer service rather than prospective alignments. Collaboratively supply transparent ROI whereas scalable e-commerce.

Proactively myocardinate fully tested meta-services without adaptive e-commerce. Efficiently leverage other's enabled total linkage with global channels.

Filed Under: Category Name

Templates are patterns

for your website

Every type of page has a template

Header

Footer

Sidebar

Post TitleNormal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod.





Home PageLists posts from newest to oldest, blog style(aka index.php, home.php, front-page.php)

Header

Footer

Sidebar

Post Title

Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod.



September 1, 2013 * By Author Name

File Under: CategoryTag, Tag, Tag, Tag


Leave a Comment:

PostDisplays a single post and comments

(aka single.php)

Header

Footer

Sidebar

Page Title




September 1, 2013 * By Author Name

File Under: CategoryTag, Tag, Tag, Tag


Leave a Comment:

PageDisplays a single page

(aka page.php*)

* if page.php doesn’t exist, WordPress uses single.php for pages

Header

Footer

Sidebar






Archive: Category, Tag, Date, or Author

Archives(aka archive.php, category.php,

tag.php, author.php)

Getting More Specific

category.php → category-baking.php

page.php → page-about.php

single.php → single-products.php

Templates for Page Parts

Page Content

Header

Footer

Sidebar

Header(aka header.php)

Page Content

Header

Footer

Sidebar

Footer(aka footer.php)

Page Content

Header

Footer

Sidebar

Sidebar(aka sidebar.php)

Content(aka content.php, content-audio.php, etc.)

Page Content

Header

Footer

Sidebar

Template Master GuideThe Template Hierarchy Diagram (don’t let the name scare you)

h"p://codex.wordpress.org/Template_Hierarchy

http://codex.wordpress.org/Template_Hierarchy

http://codex.wordpress.org/Template_Hierarchy

h"p://wphierarchy.com/

http://wphierarchy.com/


What about those other files & folders?

functions.php

• Used to enable theme features (menus, widget areas, featured images, etc.).

• Can be used to do anything a plugin can do.

style.css

• The most important file in your theme.

• Controls all design elements:

• All type settings (style, size, color, line spacing, margins, etc.).

• Positioning of layout, sidebars, header, footer, and everything else.

• Anything you think of as “design” is probably controlled by CSS

The same WordPress site without CSS...

Customizing Your Theme

Theme CustomizerThe “No Code” Way to Customize

But what about bigger changes?

CSSIt’s code, but at least it’s not PHP

h1.site-‐;tle {color: #040393;font-‐size: 2em;font-‐style: italic;

}











.site-‐main {background-‐color: #011033;

}







div#navbar { background: #990000;}.nav-‐menu li a { color: #fff;}













.site-‐header .home-‐link { min-‐height: 150px;}







How do I know what CSS classes to use?

h"p://geOirebug.com

http://getfirebug.com

http://getfirebug.com

Before you change any CSS or

a theme template

Start With a Child Theme

• A child theme protects your customizations.

• Child theme templates and styles override the parent theme.

/wp-‐content/themes/



/wp-‐content/themes/mychildtheme/



/wp-‐content/themes/twentythirteen/style.css



/wp-‐content/themes/mychildtheme/style.css



PHPI said *almost* no PHP

When You Need to “Know” PHP

• To change some common content element on a page (“Leave a comment”)

• To add or remove content elements on a page (title, date, category, etc.)

• Add a WordPress feature (menu, widget area, featured image, etc.)

Inside a Template File

• PHP

• HTML

• Sometimes JavaScript

• CSS is in a stylesheet not the templates

Ready to Dig Deeper Into WordPress Themes?

Theme Mechanics Workshop

• Five weekly sessions on WordPress themes (60 minutes each).

• In-depth coverage of WordPress theme topics.

• Learn how to customize your themes.

• Q&A with each session.

• Replays available in workshop member portal.

• Session content will be shaped by your feedback and needs.

Workshop Topics• Setting up a WordPress theme lab on your PC or Mac.

• Working with the WordPress loop.

• Customizing theme templates: add common features like menus, widget areas, custom headers and footers, WP customization features (with child themes, of course).

• Creating custom page templates.

• Framework and starter themes. What they are and when to use them.

• Debugging. Fixing stuff when it breaks.

Prerequisites

• You should be familiar working with WordPress.

• You should know a bit about HTML and CSS.

• PHP knowledge is not essential, but you should expect to learn some along the way.

More Information at:http://workshop.wpapprentice.com

Code Editor Features

• Color code highlighting

• Line numbering

• Code completion

• Unicode support

wordpress theme mechanics

Design

porta ac consectetur

tellus ac cursus commodo

praesent commodo cursus

amet risus

morbi leo risus

tortor mauris condimentum

ut fermentum massa justo

donec ullamcorper nulla