SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Downloaden Sie, um offline zu lesen
WordPress
Themes for Beginners
(non-programmers)
Bonnie Vasko
VaskoInteractive.com
@vaskointeractv
Bonnie Vasko
UI Developer at Comcast
(until recently, that is)
Developer at NetReach
(maker of cmScribe cms)
Freelance web developer
@vaskointeractv
About this Talk:
High Level Overview
Not a code review
Walk away with an understanding of
Where to find themes
Paid vs. Free
Parent / Child Themes
Theme Frameworks
Theme Structure
What is a theme?
It’s a way to your skin your site
How your site looks
How your site works
Keeps the functionality separate from the core
wordpress files
3 Ways to Install a
Theme
1 - Search and Install from the admin panel
2 - Upload a zip file from your computer, let
wordpress decompress, and install
3 - FTP your theme to wp-content/themes
How to choose a theme
Plan your site layout before choosing
Not choose the theme, and follow that
Think about what functionality you will need
Have your site content planned
Will you be using pages or posts
Categories or tags
social media integration
PAGES
CATEGORIES
JQUERY SLIDER
WITH CUSTOM HTML
RECENT
POSTS
SOCIAL MEDIA
FEATURED
CONTENT
AREA
PHOTO
FEED
Where to get themes
The WordPress Repository (Free)
Smashing Magazine (free, updated annually)
Woo Themes : High Quality
Paid Themes:
Woo Themes
Theme Forest
Many more....
Parent / Child Themes
A child theme inherits the functionality of the
parent theme
You can create a child of any theme
Upgrade the parent theme without losing your
changes
Live Demo
Child Theme Basics
Setting up a child theme
(in 4 easy steps)
Create a new folder, and add a style.css file
Modify the child theme’s style.css header
Import & override parent styles
Optional step: Override parent theme templates
Theme Frameworks
What is a framework?
Gives you a starting point - styles and layout that
are common to all themes are already set up
3 free frameworks: Hybrid, Thematic & Sandbox
Advantages: Large community, widely used, open
Paid frameworks: Thesis & Genesis
Template Files
Template files are the building blocks of your WordPress site. They fit together like the pieces of a
puzzle to generate the web pages on your site. Some templates (the header and footer template files
for example) are used on all the web pages, while others are used only under specific conditions.
Header <?php get_header(); ?> this is a template tag
Footer <?php get_footer(); ?>
Content
“The Loop”
Sidebar
<?php get_sidebar(); ?>
REPRODUCED (WITH PERMISSION) FROM “DIG INTO WORDPRESS” BY CHRIS COYIER AND JEFF STARR
Theme Files
REPRODUCED (WITH PERMISSION) FROM “DIG INTO WORDPRESS” BY CHRIS COYIER AND JEFF STARR
The Loop
The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress
processes each of the posts to be displayed on the current page and formats them according to how
they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be
repeated on each post. When WordPress documentation states "This tag must be within The Loop",
such as for specific Template Tag or plugins, the tag will be repeated for each post.
<?php
// The Loop
if (have_posts()) : while (have_posts()) : the_post();
?>
HTTP://CODEX.WORDPRESS.ORG/THE_LOOP

Weitere ähnliche Inhalte

Was ist angesagt?

Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
Installing WordPress The Right Way
Installing WordPress The Right WayInstalling WordPress The Right Way
Installing WordPress The Right WayChris Burgess
 
What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?BobWP.com
 
CSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the GutsCSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the GutsDougal Campbell
 
What is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itWhat is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itBobWP.com
 
Intro To WordPress Themes
Intro To WordPress ThemesIntro To WordPress Themes
Intro To WordPress Themesdamonsharp
 
WordPress A CMS for Beginners, Geeks and Those In-Between
WordPress A CMS for Beginners, Geeks and Those In-BetweenWordPress A CMS for Beginners, Geeks and Those In-Between
WordPress A CMS for Beginners, Geeks and Those In-BetweenHeidi Cool
 
There's No Crying In Wordpress! (an intro to WP)
There's No Crying In Wordpress! (an intro to WP)There's No Crying In Wordpress! (an intro to WP)
There's No Crying In Wordpress! (an intro to WP)Grace Solivan
 
WordPress developer 101
WordPress developer 101WordPress developer 101
WordPress developer 101Cindy Cullen
 
Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Aum Watcharapol
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPressMatthew Vaccaro
 
WordPress 3: Leveraging the Shiny New Features
WordPress 3: Leveraging the Shiny New FeaturesWordPress 3: Leveraging the Shiny New Features
WordPress 3: Leveraging the Shiny New FeaturesReggie Nicolay
 
WordPress Themes Demystified
WordPress Themes DemystifiedWordPress Themes Demystified
WordPress Themes DemystifiedChris Burgess
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkPtah Dunbar
 
Empowering Non-Profits with WordPress
Empowering Non-Profits with WordPressEmpowering Non-Profits with WordPress
Empowering Non-Profits with WordPressCliff Seal
 
Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...
Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...
Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...Angela Meeker
 

Was ist angesagt? (19)

Wordpress as a CMS
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Installing WordPress The Right Way
Installing WordPress The Right WayInstalling WordPress The Right Way
Installing WordPress The Right Way
 
What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?
 
CSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the GutsCSI: WordPress -- Getting Into the Guts
CSI: WordPress -- Getting Into the Guts
 
What is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itWhat is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About it
 
Intro To WordPress Themes
Intro To WordPress ThemesIntro To WordPress Themes
Intro To WordPress Themes
 
WordPress A CMS for Beginners, Geeks and Those In-Between
WordPress A CMS for Beginners, Geeks and Those In-BetweenWordPress A CMS for Beginners, Geeks and Those In-Between
WordPress A CMS for Beginners, Geeks and Those In-Between
 
There's No Crying In Wordpress! (an intro to WP)
There's No Crying In Wordpress! (an intro to WP)There's No Crying In Wordpress! (an intro to WP)
There's No Crying In Wordpress! (an intro to WP)
 
WordPress developer 101
WordPress developer 101WordPress developer 101
WordPress developer 101
 
Child Theme
Child ThemeChild Theme
Child Theme
 
Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
WordPress 3: Leveraging the Shiny New Features
WordPress 3: Leveraging the Shiny New FeaturesWordPress 3: Leveraging the Shiny New Features
WordPress 3: Leveraging the Shiny New Features
 
WordPress Themes Demystified
WordPress Themes DemystifiedWordPress Themes Demystified
WordPress Themes Demystified
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
 
Empowering Non-Profits with WordPress
Empowering Non-Profits with WordPressEmpowering Non-Profits with WordPress
Empowering Non-Profits with WordPress
 
Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...
Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...
Extending WordPress Multisite for Fun and Profit by Angie Meeker at WordPress...
 

Ähnlich wie Wordcamp 2010

Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersBonnie Vasko
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersBonnie Vasko
 
Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)Nur Roni D
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012Joe Querin
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
Wordpress For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For BegineerBinita Neupane
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themesChris Olbekson
 
WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1David Bisset
 
Building a WordPress Powered Website
Building a WordPress Powered WebsiteBuilding a WordPress Powered Website
Building a WordPress Powered WebsiteDeltinaU
 
Choosing the Right WordPress Theme
Choosing the Right WordPress ThemeChoosing the Right WordPress Theme
Choosing the Right WordPress ThemeChris Burgess
 
Word press bootcamp By Sourcescript Innovations and Mentors Dojo
Word press bootcamp  By Sourcescript Innovations and Mentors DojoWord press bootcamp  By Sourcescript Innovations and Mentors Dojo
Word press bootcamp By Sourcescript Innovations and Mentors Dojolightshire
 
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media InstituteWordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media InstituteBrendan Sera-Shriar
 
Wordpress Tech Talk at Atlogys
Wordpress Tech Talk at AtlogysWordpress Tech Talk at Atlogys
Wordpress Tech Talk at AtlogysRitika Garga
 
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
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationMelanie Archer
 

Ähnlich wie Wordcamp 2010 (20)

Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for Beginners
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for Beginners
 
Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
Wordpress For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For Begineer
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1
 
Building a WordPress Powered Website
Building a WordPress Powered WebsiteBuilding a WordPress Powered Website
Building a WordPress Powered Website
 
Choosing the Right WordPress Theme
Choosing the Right WordPress ThemeChoosing the Right WordPress Theme
Choosing the Right WordPress Theme
 
Word press bootcamp By Sourcescript Innovations and Mentors Dojo
Word press bootcamp  By Sourcescript Innovations and Mentors DojoWord press bootcamp  By Sourcescript Innovations and Mentors Dojo
Word press bootcamp By Sourcescript Innovations and Mentors Dojo
 
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media InstituteWordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
 
Wordpress Tech Talk at Atlogys
Wordpress Tech Talk at AtlogysWordpress Tech Talk at Atlogys
Wordpress Tech Talk at Atlogys
 
Wordpress Tech Talk
Wordpress Tech Talk Wordpress Tech Talk
Wordpress Tech Talk
 
Starting wordpress
Starting wordpressStarting wordpress
Starting wordpress
 
W pthemes
W pthemesW pthemes
W pthemes
 
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 instruction for 675
Wordpress instruction for 675Wordpress instruction for 675
Wordpress instruction for 675
 
Open Source CMS
Open Source CMSOpen Source CMS
Open Source CMS
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
 

Wordcamp 2010

  • 1. WordPress Themes for Beginners (non-programmers) Bonnie Vasko VaskoInteractive.com @vaskointeractv
  • 2. Bonnie Vasko UI Developer at Comcast (until recently, that is) Developer at NetReach (maker of cmScribe cms) Freelance web developer @vaskointeractv
  • 3. About this Talk: High Level Overview Not a code review Walk away with an understanding of Where to find themes Paid vs. Free Parent / Child Themes Theme Frameworks Theme Structure
  • 4. What is a theme? It’s a way to your skin your site How your site looks How your site works Keeps the functionality separate from the core wordpress files
  • 5. 3 Ways to Install a Theme 1 - Search and Install from the admin panel 2 - Upload a zip file from your computer, let wordpress decompress, and install 3 - FTP your theme to wp-content/themes
  • 6. How to choose a theme Plan your site layout before choosing Not choose the theme, and follow that Think about what functionality you will need Have your site content planned Will you be using pages or posts Categories or tags social media integration
  • 7.
  • 8. PAGES CATEGORIES JQUERY SLIDER WITH CUSTOM HTML RECENT POSTS SOCIAL MEDIA FEATURED CONTENT AREA PHOTO FEED
  • 9. Where to get themes The WordPress Repository (Free) Smashing Magazine (free, updated annually) Woo Themes : High Quality Paid Themes: Woo Themes Theme Forest Many more....
  • 10. Parent / Child Themes A child theme inherits the functionality of the parent theme You can create a child of any theme Upgrade the parent theme without losing your changes Live Demo Child Theme Basics
  • 11. Setting up a child theme (in 4 easy steps) Create a new folder, and add a style.css file Modify the child theme’s style.css header Import & override parent styles Optional step: Override parent theme templates
  • 12. Theme Frameworks What is a framework? Gives you a starting point - styles and layout that are common to all themes are already set up 3 free frameworks: Hybrid, Thematic & Sandbox Advantages: Large community, widely used, open Paid frameworks: Thesis & Genesis
  • 13. Template Files Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions. Header <?php get_header(); ?> this is a template tag Footer <?php get_footer(); ?> Content “The Loop” Sidebar <?php get_sidebar(); ?>
  • 14. REPRODUCED (WITH PERMISSION) FROM “DIG INTO WORDPRESS” BY CHRIS COYIER AND JEFF STARR
  • 15. Theme Files REPRODUCED (WITH PERMISSION) FROM “DIG INTO WORDPRESS” BY CHRIS COYIER AND JEFF STARR
  • 16. The Loop The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post. When WordPress documentation states "This tag must be within The Loop", such as for specific Template Tag or plugins, the tag will be repeated for each post. <?php // The Loop if (have_posts()) : while (have_posts()) : the_post(); ?> HTTP://CODEX.WORDPRESS.ORG/THE_LOOP