SlideShare una empresa de Scribd logo
1 de 36
Descargar para leer sin conexión
Crash Course
in Theme Surgery
WordCamp Baltimore 2012


@mattdeville
www.rationalfrank.com
Agenda

 •	getting started with theming
 •	what is theme surgery?
 •	child themes
 •	modifying an existing theme
 •	helpful functions




                                  2
Who am I?

            •	Creative Director 	
              at G.1440
            •	a blogger
            •	a cyclist
            •	an artist
            •	part-time metalhead



                                    3
Ever feel like
  someone is
watching you?
If you have a blog,
someone probably is.
Content may be King…
          but
Experience is Everything
What are Themes?

 •	PHP files
 •	CSS files
 •	JavaScript files
 •	Images


They control the look and feel of your site.
They are located in /wp-content/themes.


                                               7
Theme Structure

Themes are (or should be) broken into logical
components that mimic the way we typically think
about web pages:
 •	header
 •	body
 •	sidebar
 •	footer



                                                   8
Structure Visualized

  These parts relate to files in a theme:

header.php               Header

                                              sidebar.php
index.php

page.php        Body/Content        Sidebar
single.php




                         Footer               footer.php



                                                       9
More Theme Structure

Themes can contain more files:
 •	archive.php
 •	content.php
 •	category.php
 •	image.php
 •	search.php
 •	page-home.php (a page template file)


                                          10
Simple Themes

Simplest is 	
83 lines of PHP	
and 75 lines of CSS	
in 4 files.




                       11
Complex Themes

TwentyEleven	
is quite complex.


Lots of files.
Very flexible.
Fully localized.
Confusing. (At least for me)


                               12
Modes of Learning

Some folks learn best
when starting from
scratch.

      I don’t.
    I like to
 break things.

                        13
Getting Started

Find a theme that is close to what you want:


            structurally
              visually
            functionally

                                               14
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…

                                     15
Word of Caution

 Surgery isn’t always the best option




                                        16
Another Word of Caution

    If you edit a theme from the directory:

 change the stylesheet so it doesn’t
accidentally get overwritten when an
        upgrade is released!




                                              17
Child Themes

Child themes inherit from an existing theme:
 •	structure
 •	style
 •	functionality




                                               18
Child Themes

Child themes also:
 •	Allow you to change the appearance of your
   site without compromising the original theme
 •	Give you the ability to fall back to the original
   at the click of a button




                                                       19
Child Themes
                  /*
                  Theme Name: heavy metal ground hog
                  Theme URI: http://rationalfrank.com
                  Author: Matthew DeVille
 template         Author URI: http://rationalfrank.com/
 refers to the    Description: simple responsive theme!
 name of the      Template: crashcourse
 parent theme’s   Version: 1.0
 directory        License: GNU General Public License
                  License URI: license.txt
                  Tags: simple, responsive
                  */
 import the
 parent theme’s   @import url(“../crashcourse/style.css”);
 stylesheet

                                                             20
Child Themes

Only bring over
the styles you
want to override.
       AND
Only bring over
the files you want
to override.




                     21
CSS Not Enough?

If you need to change the HTML structure, you can
still do surgery with child themes.
 •	It is still non-invasive, but very effective.
 •	Add files to your child theme to override the
   parent theme.
 •	Add functions to the child theme functions file
   to allow for further customization.



                                                     22
The Loop

The loop is the center of the
Wordpress universe.
 •	it is basically an elaborate
   while loop
 •	use it to cycle through
   multiple posts and display
   in a list
 •	use it to display the
   content of one post/page

                                  23
The Loop

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	   <div class=”post”>

	   <h1><?php the_title(); ?></h2>             output post/page
	   <?php the_content(); ?>                    content here.
	</div>

<?php endwhile; else: ?>

	   <p><?php _e(‘Sorry, no posts matched
	   your criteria.’); ?></p>

<?php endif; ?>




                                                                      24
Use body_class();

Make sure your theme uses body class. It will give
you clues to the file being used to generate a
specific page.


<body <?php body_class(); ?>>


              Firebug rules




                                                     25
Images and Paths

Want to include an image? Code for portability:
WRONG
<img src=”/images/groundhog_of_doom.jpg”>

USE
<?php bloginfo(‘template_url‘); ?>

RIGHT
<img src=”<?php bloginfo(‘template_url‘); ?>/images/
groundhog_of_doom.jpg”>



                                                       26
CSS and Javascript

The same goes for CSS and JS. Code for portability:
WRONG
<script src=”/wp-content/themes/crashcourse/js/respond.min.
js”></script>
USE
<?php bloginfo(‘template_url‘); ?>

RIGHT
<script src=”<?php bloginfo(‘template_url‘); ?>/js/respond.
min.js”></script>


                                                              27
What is your Function?

functions.php is where you add functionality to
you theme:
 •	sidebars
 •	menus
 •	post thumbnails
 •	custom post types
 •	general use functions


                                                  28
Adding Menus

Your theme can have one or many menus:
register_nav_menu(
	‘main_nav’,          location
	 ‘Main Navigation’   description
);
register_nav_menu(
	‘footer_nav’,
	 ‘Main Navigation’
);




                                         29
Calling Menus

You could then call those menus:
by name:
wp_nav_menu(
	 array(‘menu’ => ‘Main Navigation’ )
);

or by location
wp_nav_menu(
	 array(‘location’ => ‘main_nav’ )
);



                                        30
Adding Sidebars

Your theme can have multiple sidebars:
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>’
	)
);



                                                     31
Sidebars

Possible locations for multiple sidebars:

                    Header

                                          Sidebar
                                                          register_sidebar(
                                                            array(
      Body/Content                      Sidebar 1             ‘name’ => __( ‘Right Sidebar 1’ ),
                                                              ‘id’ => ‘right-sidebar-1’,
                                                              ‘description’ => __( ‘description
                                                              goes here’ ),
                                        Sidebar 2             ‘before_title’ => ‘<h1>’,
                                                              ‘after_title’ => ‘</h1>’
                                                            )
                                                          );
                       Footer


 Footer Sidebar 1   Footer Sidebar 2   Footer Sidebar 3




                                                                                               32
Calling Sidebars

You could then call those sidebars:
by name:
<?php dynamic_sidebar(‘Right Sidebar 1’); ?>

or by ID:
<?php dynamic_sidebar(‘right-sidebar-1’); ?>




                                               33
Adding a Page Template

Not every page in a site needs to look the same.
That’s where templates come in handy.


                            <?php
                            /*
                            Template Name: Full Width
                            */
                            get_header();
                            ?>




                                                        34
The Abrupt Conclusion




  Go forth and
 make something!
QUESTIONS?

Más contenido relacionado

La actualidad más candente

WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designerselliotjaystocks
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2Josh Lee
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerSteven Pignataro
 
WordPress Theme Development
 WordPress Theme Development WordPress Theme Development
WordPress Theme DevelopmentBijay Oli
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikMario Peshev
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Eugenio Minardi
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
WordPress Theme Development
WordPress Theme DevelopmentWordPress Theme Development
WordPress Theme DevelopmentWisdmLabs
 
Drupal 8: Theming
Drupal 8: ThemingDrupal 8: Theming
Drupal 8: Themingdrubb
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designersPai-Cheng Tao
 
WordPress Custom Post Types
WordPress Custom Post TypesWordPress Custom Post Types
WordPress Custom Post TypesNile Flores
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Emma Jane Hogbin Westby
 
Stepping Into Custom Post Types
Stepping Into Custom Post TypesStepping Into Custom Post Types
Stepping Into Custom Post TypesK.Adam White
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
The awesome things you can do with images inside WordPress
The awesome things you can do with images inside WordPressThe awesome things you can do with images inside WordPress
The awesome things you can do with images inside WordPressMarko Heijnen
 

La actualidad más candente (20)

WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
WordPress Theme Development
 WordPress Theme Development WordPress Theme Development
WordPress Theme Development
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
 
Word press course
Word press courseWord press course
Word press course
 
A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
WordPress Theme Development
WordPress Theme DevelopmentWordPress Theme Development
WordPress Theme Development
 
Drupal 8: Theming
Drupal 8: ThemingDrupal 8: Theming
Drupal 8: Theming
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
WordPress Custom Post Types
WordPress Custom Post TypesWordPress Custom Post Types
WordPress Custom Post Types
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Stepping Into Custom Post Types
Stepping Into Custom Post TypesStepping Into Custom Post Types
Stepping Into Custom Post Types
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
The awesome things you can do with images inside WordPress
The awesome things you can do with images inside WordPressThe awesome things you can do with images inside WordPress
The awesome things you can do with images inside WordPress
 

Destacado (9)

Ratings
RatingsRatings
Ratings
 
Amplify happiness
Amplify happinessAmplify happiness
Amplify happiness
 
Virtual world collaboration
Virtual world collaborationVirtual world collaboration
Virtual world collaboration
 
Ratings
RatingsRatings
Ratings
 
Brains R Us Technology
Brains  R  Us  TechnologyBrains  R  Us  Technology
Brains R Us Technology
 
Brains R Us Basics
Brains R Us BasicsBrains R Us Basics
Brains R Us Basics
 
Virtual World Basics
Virtual World BasicsVirtual World Basics
Virtual World Basics
 
The world is flat leadership book review
The world is flat leadership book reviewThe world is flat leadership book review
The world is flat leadership book review
 
Mona Vie Flip Chart
Mona Vie Flip ChartMona Vie Flip Chart
Mona Vie Flip Chart
 

Similar a Crash Course in Theme Surgery

Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme EnlightenmentAmanda Giles
 
How does get template part works in twenty ten theme
How does get template part works in twenty ten themeHow does get template part works in twenty ten theme
How does get template part works in twenty ten thememohd rozani abd ghani
 
Anatomy of a Wordpress theme
Anatomy of a Wordpress themeAnatomy of a Wordpress theme
Anatomy of a Wordpress themeDave Wallace
 
Towards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme StructureTowards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme StructureGraham Armfield
 
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Kelly Dwan
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4David Bisset
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Themecertainstrings
 
Builing a WordPress Theme
Builing a WordPress ThemeBuiling a WordPress Theme
Builing a WordPress Themecertainstrings
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technicalAlex Walker
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress ThemesLaura Hartwig
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3David Bisset
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25New Tricks
 
Wordpress Manual Document
Wordpress Manual DocumentWordpress Manual Document
Wordpress Manual DocumentFarzad Wadia
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesDamien Carbery
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingJamie Schmid
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 

Similar a Crash Course in Theme Surgery (20)

Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
 
How does get template part works in twenty ten theme
How does get template part works in twenty ten themeHow does get template part works in twenty ten theme
How does get template part works in twenty ten theme
 
Anatomy of a Wordpress theme
Anatomy of a Wordpress themeAnatomy of a Wordpress theme
Anatomy of a Wordpress theme
 
Towards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme StructureTowards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme Structure
 
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
 
Builing a WordPress Theme
Builing a WordPress ThemeBuiling a WordPress Theme
Builing a WordPress Theme
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
WordPress Theming 101
WordPress Theming 101WordPress Theming 101
WordPress Theming 101
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Theming 101
Theming 101Theming 101
Theming 101
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25
 
Wordpress Manual Document
Wordpress Manual DocumentWordpress Manual Document
Wordpress Manual Document
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notes
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress Themeing
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 

Último

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 

Último (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 

Crash Course in Theme Surgery

  • 1. Crash Course in Theme Surgery WordCamp Baltimore 2012 @mattdeville www.rationalfrank.com
  • 2. Agenda • getting started with theming • what is theme surgery? • child themes • modifying an existing theme • helpful functions 2
  • 3. Who am I? • Creative Director at G.1440 • a blogger • a cyclist • an artist • part-time metalhead 3
  • 4. Ever feel like someone is watching you?
  • 5. If you have a blog, someone probably is.
  • 6. Content may be King… but Experience is Everything
  • 7. What are Themes? • PHP files • CSS files • JavaScript files • Images They control the look and feel of your site. They are located in /wp-content/themes. 7
  • 8. Theme Structure Themes are (or should be) broken into logical components that mimic the way we typically think about web pages: • header • body • sidebar • footer 8
  • 9. Structure Visualized These parts relate to files in a theme: header.php Header sidebar.php index.php page.php Body/Content Sidebar single.php Footer footer.php 9
  • 10. More Theme Structure Themes can contain more files: • archive.php • content.php • category.php • image.php • search.php • page-home.php (a page template file) 10
  • 11. Simple Themes Simplest is 83 lines of PHP and 75 lines of CSS in 4 files. 11
  • 12. Complex Themes TwentyEleven is quite complex. Lots of files. Very flexible. Fully localized. Confusing. (At least for me) 12
  • 13. Modes of Learning Some folks learn best when starting from scratch. I don’t. I like to break things. 13
  • 14. Getting Started Find a theme that is close to what you want: structurally visually functionally 14
  • 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… 15
  • 16. Word of Caution Surgery isn’t always the best option 16
  • 17. Another Word of Caution If you edit a theme from the directory: change the stylesheet so it doesn’t accidentally get overwritten when an upgrade is released! 17
  • 18. Child Themes Child themes inherit from an existing theme: • structure • style • functionality 18
  • 19. Child Themes Child themes also: • Allow you to change the appearance of your site without compromising the original theme • Give you the ability to fall back to the original at the click of a button 19
  • 20. Child Themes /* Theme Name: heavy metal ground hog Theme URI: http://rationalfrank.com Author: Matthew DeVille template Author URI: http://rationalfrank.com/ refers to the Description: simple responsive theme! name of the Template: crashcourse parent theme’s Version: 1.0 directory License: GNU General Public License License URI: license.txt Tags: simple, responsive */ import the parent theme’s @import url(“../crashcourse/style.css”); stylesheet 20
  • 21. Child Themes Only bring over the styles you want to override. AND Only bring over the files you want to override. 21
  • 22. CSS Not Enough? If you need to change the HTML structure, you can still do surgery with child themes. • It is still non-invasive, but very effective. • Add files to your child theme to override the parent theme. • Add functions to the child theme functions file to allow for further customization. 22
  • 23. The Loop The loop is the center of the Wordpress universe. • it is basically an elaborate while loop • use it to cycle through multiple posts and display in a list • use it to display the content of one post/page 23
  • 24. The Loop <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class=”post”> <h1><?php the_title(); ?></h2> output post/page <?php the_content(); ?> content here. </div> <?php endwhile; else: ?> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <?php endif; ?> 24
  • 25. Use body_class(); Make sure your theme uses body class. It will give you clues to the file being used to generate a specific page. <body <?php body_class(); ?>> Firebug rules 25
  • 26. Images and Paths Want to include an image? Code for portability: WRONG <img src=”/images/groundhog_of_doom.jpg”> USE <?php bloginfo(‘template_url‘); ?> RIGHT <img src=”<?php bloginfo(‘template_url‘); ?>/images/ groundhog_of_doom.jpg”> 26
  • 27. CSS and Javascript The same goes for CSS and JS. Code for portability: WRONG <script src=”/wp-content/themes/crashcourse/js/respond.min. js”></script> USE <?php bloginfo(‘template_url‘); ?> RIGHT <script src=”<?php bloginfo(‘template_url‘); ?>/js/respond. min.js”></script> 27
  • 28. What is your Function? functions.php is where you add functionality to you theme: • sidebars • menus • post thumbnails • custom post types • general use functions 28
  • 29. Adding Menus Your theme can have one or many menus: register_nav_menu( ‘main_nav’, location ‘Main Navigation’ description ); register_nav_menu( ‘footer_nav’, ‘Main Navigation’ ); 29
  • 30. Calling Menus You could then call those menus: by name: wp_nav_menu( array(‘menu’ => ‘Main Navigation’ ) ); or by location wp_nav_menu( array(‘location’ => ‘main_nav’ ) ); 30
  • 31. Adding Sidebars Your theme can have multiple sidebars: 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>’ ) ); 31
  • 32. Sidebars Possible locations for multiple sidebars: Header Sidebar register_sidebar( array( Body/Content Sidebar 1 ‘name’ => __( ‘Right Sidebar 1’ ), ‘id’ => ‘right-sidebar-1’, ‘description’ => __( ‘description goes here’ ), Sidebar 2 ‘before_title’ => ‘<h1>’, ‘after_title’ => ‘</h1>’ ) ); Footer Footer Sidebar 1 Footer Sidebar 2 Footer Sidebar 3 32
  • 33. Calling Sidebars You could then call those sidebars: by name: <?php dynamic_sidebar(‘Right Sidebar 1’); ?> or by ID: <?php dynamic_sidebar(‘right-sidebar-1’); ?> 33
  • 34. Adding a Page Template Not every page in a site needs to look the same. That’s where templates come in handy. <?php /* Template Name: Full Width */ get_header(); ?> 34
  • 35. The Abrupt Conclusion Go forth and make something!