Crash Course in Theme Surgery
36
Crash Course in Theme Surgery WordCamp Baltimore 2012 @mattdeville www.rationalfrank.com
-
Upload
rational-frank -
Category
Technology
-
view
1.113 -
download
1
description
The slides from my presentation at WordCamp Baltimore 2012.
Transcript of Crash Course in Theme Surgery
Crash Course in Theme SurgeryWordCamp Baltimore 2012
@mattdevillewww.rationalfrank.com
2
•gettingstartedwiththeming
•whatisthemesurgery?
•childthemes
•modifyinganexistingtheme
•helpfulfunctions
Agenda
3
•CreativeDirectoratG.1440
•ablogger
•acyclist
•anartist
•part-timemetalhead
Who am I?
Ever feel like someone is
watching you?
If you have a blog, someone probably is.
Content may be King…but
Experience is Everything
7
What are Themes?
•PHPfiles
•CSSfiles
•JavaScriptfiles
•Images
Theycontrolthelookandfeelofyoursite.
Theyarelocatedin/wp-content/themes.
8
Theme Structure
Themesare(orshouldbe)brokenintologicalcomponentsthatmimicthewaywetypicallythinkaboutwebpages:
•header
•body
•sidebar
•footer
9
Structure Visualized
Thesepartsrelatetofilesinatheme:
Header
Body/Content Sidebar
Footer
header.php
index.php
page.php
single.php
sidebar.php
footer.php
10
More Theme Structure
Themescancontainmorefiles:
•archive.php
•content.php
•category.php
•image.php
•search.php
•page-home.php(apagetemplatefile)
11
Simple Themes
Simplestis83linesofPHPand75linesofCSSin4files.
12
Complex Themes
TwentyElevenisquitecomplex.
Lotsoffiles.
Veryflexible.
Fullylocalized.
Confusing.(Atleastforme)
13
Modes of Learning
Somefolkslearnbestwhenstartingfromscratch.
I don’t.
I like to break things.
14
Getting Started
Findathemethatisclosetowhatyouwant:
structurallyvisually
functionally
15
Theme Surgery
remove what you don’t want or need
change the colors
tweak the typography
alter the html structure
rewrite the styles
make the logo bigger…
16
Word of Caution
Surgery isn’t always the best option
17
Another Word of Caution
Ifyoueditathemefromthedirectory:
change the stylesheet so it doesn’t accidentally get overwritten when an
upgrade is released!
18
Child Themes
Childthemesinheritfromanexistingtheme:
•structure
•style
•functionality
19
Child Themes
Childthemesalso:
•Allowyoutochangetheappearanceofyoursitewithoutcompromisingtheoriginaltheme
•Giveyoutheabilitytofallbacktotheoriginalattheclickofabutton
20
Child Themes
/*ThemeName:heavymetalgroundhogThemeURI:http://rationalfrank.comAuthor:MatthewDeVilleAuthorURI:http://rationalfrank.com/Description:simpleresponsivetheme!Template: crashcourseVersion:1.0License:GNUGeneralPublicLicenseLicenseURI:license.txtTags:simple,responsive*/
@import url(“../crashcourse/style.css”);
template refers to the name of the parent theme’s directory
import the parent theme’s stylesheet
21
Child Themes
Onlybringoverthestylesyouwanttooverride.
AND
Onlybringoverthefilesyouwanttooverride.
22
IfyouneedtochangetheHTMLstructure,youcanstilldosurgerywithchildthemes.
•Itisstillnon-invasive,butveryeffective.
•Addfilestoyourchildthemetooverridetheparenttheme.
•Addfunctionstothechildthemefunctionsfiletoallowforfurthercustomization.
CSS Not Enough?
23
The Loop
TheloopisthecenteroftheWordpressuniverse.
•itisbasicallyanelaboratewhileloop
•useittocyclethroughmultiplepostsanddisplayinalist
•useittodisplaythecontentofonepost/page
24
The Loop
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class=”post”>
<h1><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
output post/page content here.
25
Makesureyourthemeusesbodyclass.Itwillgiveyoucluestothefilebeingusedtogenerateaspecificpage.
<body <?php body_class(); ?>>
Use body_class();
Firebug rules
26
Images and Paths
Wanttoincludeanimage?Codeforportability:
WRONG<imgsrc=”/images/groundhog_of_doom.jpg”>
USE<?phpbloginfo(‘template_url‘);?>
RIGHT<imgsrc=”<?php bloginfo(‘template_url‘); ?>/images/groundhog_of_doom.jpg”>
27
CSS and Javascript
ThesamegoesforCSSandJS.Codeforportability:
WRONG<scriptsrc=”/wp-content/themes/crashcourse/js/respond.min.js”></script>
USE<?phpbloginfo(‘template_url‘);?>
RIGHT<scriptsrc=”<?php bloginfo(‘template_url‘); ?>/js/respond.min.js”></script>
28
What is your Function?
functions.phpiswhereyouaddfunctionalitytoyoutheme:
•sidebars
•menus
•postthumbnails
•customposttypes
•generalusefunctions
29
Adding Menus
Yourthemecanhaveoneormanymenus:
register_nav_menu( ‘main_nav’, ‘Main Navigation’ );
register_nav_menu( ‘footer_nav’, ‘Main Navigation’ );
locationdescription
30
Calling Menus
Youcouldthencallthosemenus:
by name:
wp_nav_menu( array(‘menu’ => ‘Main Navigation’ ) );
or by location
wp_nav_menu( array(‘location’ => ‘main_nav’ ) );
31
Adding Sidebars
Yourthemecanhavemultiplesidebars:
register_sidebar( array( ‘name’ => __( ‘Right Hand Sidebar’ ), ‘id’ => ‘right-sidebar’, ‘description’ => __( ‘Widgets in this area will be shown on the right-hand side.’ ), ‘before_title’ => ‘<h1>’, ‘after_title’ => ‘</h1>’ ) );
32
Possiblelocationsformultiplesidebars:
Sidebars
Header
Body/Content
Sidebar
Sidebar 1
Sidebar 2
Footer
Footer Sidebar 1 Footer Sidebar 2 Footer Sidebar 3
register_sidebar( array( ‘name’ => __( ‘Right Sidebar 1’ ), ‘id’ => ‘right-sidebar-1’, ‘description’ => __( ‘description goes here’ ), ‘before_title’ => ‘<h1>’, ‘after_title’ => ‘</h1>’ ) );
33
Calling Sidebars
Youcouldthencallthosesidebars:
by name:
<?php dynamic_sidebar(‘Right Sidebar 1’); ?>
or by ID:
<?php dynamic_sidebar(‘right-sidebar-1’); ?>
34
Adding a Page Template
Noteverypageinasiteneedstolookthesame.That’swheretemplatescomeinhandy.
<?php /* Template Name: Full Width */
get_header(); ?>
The Abrupt Conclusion
Go forth and make something!
QUESTIONS?
