SlideShare a Scribd company logo
1 of 16
WordPress
Themes for Beginners
(non-programmers)
(non-programmers)
(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)
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.
HeaderHeader <?php get_header(); ?> this is a template tag
FooterFooter <?php get_footer(); ?>
ContentContent
““The Loop”The Loop”
SidebarSidebar
<?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 Loopif (have_posts()) : while (have_posts()) : the_post();
?>
http://codex.wordpress.org/The_Loop

More Related Content

What's hot

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
BobWP.com
 
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
 

What's hot (19)

NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & Security
 
Installing WordPress The Right Way
Installing WordPress The Right WayInstalling WordPress The Right Way
Installing WordPress The Right Way
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
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
 
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?
 
WordPress developer 101
WordPress developer 101WordPress developer 101
WordPress developer 101
 
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
 
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
 
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)
 
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...
 
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
 
WordPress Multisite at WordCamp Columbus by Angie Meeker
WordPress Multisite at WordCamp Columbus by Angie MeekerWordPress Multisite at WordCamp Columbus by Angie Meeker
WordPress Multisite at WordCamp Columbus by Angie Meeker
 
Empowering Non-Profits with WordPress
Empowering Non-Profits with WordPressEmpowering Non-Profits with WordPress
Empowering Non-Profits with WordPress
 
The Genius of Wordpress - notes
The Genius of Wordpress - notesThe Genius of Wordpress - notes
The Genius of Wordpress - notes
 
WordPress 101
WordPress 101WordPress 101
WordPress 101
 
WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013
 
Wordpress 101
Wordpress 101Wordpress 101
Wordpress 101
 

Viewers also liked (7)

Ethics and longevity aifg
Ethics and longevity aifgEthics and longevity aifg
Ethics and longevity aifg
 
Womma Tide Coldwater Product Launch Case Study v5
Womma Tide Coldwater Product Launch Case Study v5Womma Tide Coldwater Product Launch Case Study v5
Womma Tide Coldwater Product Launch Case Study v5
 
Social Media
Social MediaSocial Media
Social Media
 
Social journalism
Social journalismSocial journalism
Social journalism
 
Bringing Cable TV to VR
Bringing Cable TV to VRBringing Cable TV to VR
Bringing Cable TV to VR
 
PRAYER
PRAYERPRAYER
PRAYER
 
L gvib3
L gvib3L gvib3
L gvib3
 

Similar to Wordcamp 2010 Themes for Beginners

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
Joe Querin
 
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
lightshire
 

Similar to Wordcamp 2010 Themes for Beginners (20)

Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)Praktikum Rekayasa Web, WordPress (1)
Praktikum Rekayasa Web, WordPress (1)
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
 
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
 
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 For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For Begineer
 
Building a WordPress Powered Website
Building a WordPress Powered WebsiteBuilding a WordPress Powered Website
Building a WordPress Powered Website
 
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
 
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 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
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
Starting wordpress
Starting wordpressStarting wordpress
Starting wordpress
 
WordPress Theme Development
 WordPress Theme Development WordPress Theme Development
WordPress Theme Development
 
Wordpress instruction for 675
Wordpress instruction for 675Wordpress instruction for 675
Wordpress instruction for 675
 
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
 
Open Source CMS
Open Source CMSOpen Source CMS
Open Source CMS
 
W pthemes
W pthemesW pthemes
W pthemes
 
Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPress
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

Wordcamp 2010 Themes for Beginners

  • 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) 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. HeaderHeader <?php get_header(); ?> this is a template tag FooterFooter <?php get_footer(); ?> ContentContent ““The Loop”The Loop” SidebarSidebar <?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 Loopif (have_posts()) : while (have_posts()) : the_post(); ?> http://codex.wordpress.org/The_Loop