crash course in theme surgery
DESCRIPTION
The slides from my presentation at WordCamp Baltimore 2012.TRANSCRIPT
![Page 1: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/1.jpg)
Crash Course in Theme SurgeryWordCamp Baltimore 2012
@mattdevillewww.rationalfrank.com
![Page 2: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/2.jpg)
2
•gettingstartedwiththeming
•whatisthemesurgery?
•childthemes
•modifyinganexistingtheme
•helpfulfunctions
Agenda
![Page 3: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/3.jpg)
3
•CreativeDirectoratG.1440
•ablogger
•acyclist
•anartist
•part-timemetalhead
Who am I?
![Page 4: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/4.jpg)
Ever feel like someone is
watching you?
![Page 5: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/5.jpg)
If you have a blog, someone probably is.
![Page 6: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/6.jpg)
Content may be King…but
Experience is Everything
![Page 7: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/7.jpg)
7
What are Themes?
•PHPfiles
•CSSfiles
•JavaScriptfiles
•Images
Theycontrolthelookandfeelofyoursite.
Theyarelocatedin/wp-content/themes.
![Page 8: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/8.jpg)
8
Theme Structure
Themesare(orshouldbe)brokenintologicalcomponentsthatmimicthewaywetypicallythinkaboutwebpages:
•header
•body
•sidebar
•footer
![Page 9: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/9.jpg)
9
Structure Visualized
Thesepartsrelatetofilesinatheme:
Header
Body/Content Sidebar
Footer
header.php
index.php
page.php
single.php
sidebar.php
footer.php
![Page 10: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/10.jpg)
10
More Theme Structure
Themescancontainmorefiles:
•archive.php
•content.php
•category.php
•image.php
•search.php
•page-home.php(apagetemplatefile)
![Page 11: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/11.jpg)
11
Simple Themes
Simplestis83linesofPHPand75linesofCSSin4files.
![Page 12: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/12.jpg)
12
Complex Themes
TwentyElevenisquitecomplex.
Lotsoffiles.
Veryflexible.
Fullylocalized.
Confusing.(Atleastforme)
![Page 13: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/13.jpg)
13
Modes of Learning
Somefolkslearnbestwhenstartingfromscratch.
I don’t.
I like to break things.
![Page 14: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/14.jpg)
14
Getting Started
Findathemethatisclosetowhatyouwant:
structurallyvisually
functionally
![Page 15: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/15.jpg)
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…
![Page 16: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/16.jpg)
16
Word of Caution
Surgery isn’t always the best option
![Page 17: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/17.jpg)
17
Another Word of Caution
Ifyoueditathemefromthedirectory:
change the stylesheet so it doesn’t accidentally get overwritten when an
upgrade is released!
![Page 18: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/18.jpg)
18
Child Themes
Childthemesinheritfromanexistingtheme:
•structure
•style
•functionality
![Page 19: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/19.jpg)
19
Child Themes
Childthemesalso:
•Allowyoutochangetheappearanceofyoursitewithoutcompromisingtheoriginaltheme
•Giveyoutheabilitytofallbacktotheoriginalattheclickofabutton
![Page 20: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/20.jpg)
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
![Page 21: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/21.jpg)
21
Child Themes
Onlybringoverthestylesyouwanttooverride.
AND
Onlybringoverthefilesyouwanttooverride.
![Page 22: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/22.jpg)
22
IfyouneedtochangetheHTMLstructure,youcanstilldosurgerywithchildthemes.
•Itisstillnon-invasive,butveryeffective.
•Addfilestoyourchildthemetooverridetheparenttheme.
•Addfunctionstothechildthemefunctionsfiletoallowforfurthercustomization.
CSS Not Enough?
![Page 23: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/23.jpg)
23
The Loop
TheloopisthecenteroftheWordpressuniverse.
•itisbasicallyanelaboratewhileloop
•useittocyclethroughmultiplepostsanddisplayinalist
•useittodisplaythecontentofonepost/page
![Page 24: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/24.jpg)
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.
![Page 25: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/25.jpg)
25
Makesureyourthemeusesbodyclass.Itwillgiveyoucluestothefilebeingusedtogenerateaspecificpage.
<body <?php body_class(); ?>>
Use body_class();
Firebug rules
![Page 26: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/26.jpg)
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”>
![Page 27: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/27.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>
![Page 28: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/28.jpg)
28
What is your Function?
functions.phpiswhereyouaddfunctionalitytoyoutheme:
•sidebars
•menus
•postthumbnails
•customposttypes
•generalusefunctions
![Page 29: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/29.jpg)
29
Adding Menus
Yourthemecanhaveoneormanymenus:
register_nav_menu( ‘main_nav’, ‘Main Navigation’ );
register_nav_menu( ‘footer_nav’, ‘Main Navigation’ );
locationdescription
![Page 30: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/30.jpg)
30
Calling Menus
Youcouldthencallthosemenus:
by name:
wp_nav_menu( array(‘menu’ => ‘Main Navigation’ ) );
or by location
wp_nav_menu( array(‘location’ => ‘main_nav’ ) );
![Page 31: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/31.jpg)
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>’ ) );
![Page 32: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/32.jpg)
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>’ ) );
![Page 33: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/33.jpg)
33
Calling Sidebars
Youcouldthencallthosesidebars:
by name:
<?php dynamic_sidebar(‘Right Sidebar 1’); ?>
or by ID:
<?php dynamic_sidebar(‘right-sidebar-1’); ?>
![Page 34: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/34.jpg)
34
Adding a Page Template
Noteverypageinasiteneedstolookthesame.That’swheretemplatescomeinhandy.
<?php /* Template Name: Full Width */
get_header(); ?>
![Page 35: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/35.jpg)
The Abrupt Conclusion
Go forth and make something!
![Page 36: Crash Course in Theme Surgery](https://reader033.vdocuments.us/reader033/viewer/2022060109/5555f8d7d8b42a8a5f8b5000/html5/thumbnails/36.jpg)
QUESTIONS?