SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
Dharma Kelleher
      Kelleher Web Design
www.kelleherwebdesign.com
What is WordPress?
 We’re talking WordPress.org not WordPress.com


 WordPress is more than a blog. It’s a Content
 Management System (CMS).

 Allow for sites to be easily updated without getting
 into the code


               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
What is a WordPress Theme?
 Provides styling and functionality to a WordPress-
 driven website – like clothes to a body.

 Some themes are free, others cost money; the best
 ones are custom-designed for your website.

 I’m here to familiarize you with themes so you can
 customize your site.
              Dharma Kelleher - Kelleher Web Design
              www.kelleherwebdesign.com
WTH? Where’s the HTML?




        Dharma Kelleher - Kelleher Web Design
        www.kelleherwebdesign.com
WTH? Where’s the HTML?
 Static sites are built with HTML (not easily updated)


 WordPress is built mostly with PHP templates (which
 contain some HTML) connected to a MySQL
 database

 The database stores info on posts, page content,
 settings, etc. PHP makes calls to the database.

                  Dharma Kelleher - Kelleher Web Design
                  www.kelleherwebdesign.com
WTH? Where’s the HTML?
PHP:

 Is more modular


 Uses less code


 Makes it easier to add and update content


                   Dharma Kelleher - Kelleher Web Design
                   www.kelleherwebdesign.com
index.php
 This is one of the two required template files for a WP
 theme (not required for a child theme).

 Usually used as main blog page.


 The core of index.php (and many other template files)
 is the Loop, which pulls in post or page content.


               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
index.php
 Usually pulls in the header.php file


 Often pulls in footer.php file


 May also pull in sidebar(s) and other include files




               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
style.css
 The other required file for a WP theme (only one
 required for a child theme)

 CSS = Cascading StyleSheets


 Controls size, position and style of elements


 In WP, gives theme name, version, description,
 author, tags, etc.
               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
style.css
 Reset CSS helps make browsers consistent


 @media queries create special CSS for responsive
 width (e.g. phones, tablets)

 Firebug (Firefox plugin) is great way to test CSS
 changes in the browser.


               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
Other Blog-Related Template Files
 single.php – individual blog post page


 category.php – lists blog posts in a single category


 archive.php – lists blog post for a given time period


 loop.php – some themes have separate file for the
 Loop
               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
Non-Blog Template Files
 page.php – used for static (non-blog) pages


 front-page.php – used for the static home page


 404.php – for when a page can’t be found


 functions.php – adds additional functionality and
 customization
              Dharma Kelleher - Kelleher Web Design
              www.kelleherwebdesign.com
Non-Blog Template Files
 Other page template files


 Additional sidebars, footers, etc.


 Include files (nav.php, meta.php, search.php, theme
  options, additional stylesheets)

 Custom post types
               Dharma Kelleher - Kelleher Web Design
               www.kelleherwebdesign.com
Non-PHP Template Files
 screenshot.png


 favicon.ico


 image files (png, jpg, gif)


 javascript

                Dharma Kelleher - Kelleher Web Design
                www.kelleherwebdesign.com
Tools I Like to Use
 Notepad++ – text editor


 Photoshop – graphics design


 Filezilla – file transfer (ftp)


 Firebug – debugging code in Firefox


                    Dharma Kelleher - Kelleher Web Design
                    www.kelleherwebdesign.com
Resources for Learning
 WordPress Codex (codex.wordpress.org)


 W3 Schools (w3schools.com)


 WP Tuts (wp.tutsplus.com)


 Stack Overflow (stackoverflow.com)
West Valley WordPress Group
 Coming Soon! Here at Gangplank Avondale


 www.meetup.com/West-Valley-WordPress-Users/


 Open to all skill levels!!!


 Dharma Kelleher, Lisa Faiss and Cody Landefeld to
  facilitate
                Dharma Kelleher - Kelleher Web Design
                www.kelleherwebdesign.com
Your Freebie!
 Create your own theme built on Dharmania


 Theme Options and Responsive Width


 Upload into your themes folder


 www.kelleherwebdesign.com/free-stuff/

              Dharma Kelleher - Kelleher Web Design
              www.kelleherwebdesign.com
Please Stalk Me!
 My Website – www.kelleherwebdesign.com


 Follow me on Facebook, Twitter, LinkedIn and
 Google+ (links are on my website)

 Punk the Web (my blog) – Great articles on design
 and marketing. Subscribe or else!

 Email: dharma@kelleherwebdesign.com
              Dharma Kelleher - Kelleher Web Design
              www.kelleherwebdesign.com
Any Questions?




       Dharma Kelleher - Kelleher Web Design
       www.kelleherwebdesign.com

Contenu connexe

En vedette (14)

Emprendedor social 4to modulo
Emprendedor social 4to moduloEmprendedor social 4to modulo
Emprendedor social 4to modulo
 
16021 conect papers
16021 conect papers16021 conect papers
16021 conect papers
 
Fractales poema ilustrado
Fractales poema ilustradoFractales poema ilustrado
Fractales poema ilustrado
 
E actividades2
E actividades2E actividades2
E actividades2
 
culturas
culturasculturas
culturas
 
Camara
CamaraCamara
Camara
 
wiki 6 Reuso de Aguas Residuales-Colombia
wiki 6 Reuso de Aguas Residuales-Colombiawiki 6 Reuso de Aguas Residuales-Colombia
wiki 6 Reuso de Aguas Residuales-Colombia
 
Topic 1 ed105 b introduction
Topic 1 ed105 b introductionTopic 1 ed105 b introduction
Topic 1 ed105 b introduction
 
Presència i ús. Adm. Pública. Atenció al públic. CNL Reus
Presència i ús. Adm. Pública. Atenció al públic. CNL ReusPresència i ús. Adm. Pública. Atenció al públic. CNL Reus
Presència i ús. Adm. Pública. Atenció al públic. CNL Reus
 
42 siempre me eh comportado totalmente decinteresado43 normalmente no entablo...
42 siempre me eh comportado totalmente decinteresado43 normalmente no entablo...42 siempre me eh comportado totalmente decinteresado43 normalmente no entablo...
42 siempre me eh comportado totalmente decinteresado43 normalmente no entablo...
 
Cosas De Viejos
Cosas De ViejosCosas De Viejos
Cosas De Viejos
 
Grupo 7
Grupo 7Grupo 7
Grupo 7
 
Tutorial de PINVOLVE
Tutorial de PINVOLVETutorial de PINVOLVE
Tutorial de PINVOLVE
 
Practica dinamicas
Practica dinamicasPractica dinamicas
Practica dinamicas
 

Dernier

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
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
 
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
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Dernier (20)

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
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
 
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
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

Anatomy of a WordPress Theme

  • 1. Dharma Kelleher Kelleher Web Design www.kelleherwebdesign.com
  • 2. What is WordPress?  We’re talking WordPress.org not WordPress.com  WordPress is more than a blog. It’s a Content Management System (CMS).  Allow for sites to be easily updated without getting into the code Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 3. What is a WordPress Theme?  Provides styling and functionality to a WordPress- driven website – like clothes to a body.  Some themes are free, others cost money; the best ones are custom-designed for your website.  I’m here to familiarize you with themes so you can customize your site. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 4. WTH? Where’s the HTML? Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 5. WTH? Where’s the HTML?  Static sites are built with HTML (not easily updated)  WordPress is built mostly with PHP templates (which contain some HTML) connected to a MySQL database  The database stores info on posts, page content, settings, etc. PHP makes calls to the database. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 6. WTH? Where’s the HTML? PHP:  Is more modular  Uses less code  Makes it easier to add and update content Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 7. index.php  This is one of the two required template files for a WP theme (not required for a child theme).  Usually used as main blog page.  The core of index.php (and many other template files) is the Loop, which pulls in post or page content. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 8. index.php  Usually pulls in the header.php file  Often pulls in footer.php file  May also pull in sidebar(s) and other include files Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 9. style.css  The other required file for a WP theme (only one required for a child theme)  CSS = Cascading StyleSheets  Controls size, position and style of elements  In WP, gives theme name, version, description, author, tags, etc. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 10. style.css  Reset CSS helps make browsers consistent  @media queries create special CSS for responsive width (e.g. phones, tablets)  Firebug (Firefox plugin) is great way to test CSS changes in the browser. Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 11. Other Blog-Related Template Files  single.php – individual blog post page  category.php – lists blog posts in a single category  archive.php – lists blog post for a given time period  loop.php – some themes have separate file for the Loop Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 12. Non-Blog Template Files  page.php – used for static (non-blog) pages  front-page.php – used for the static home page  404.php – for when a page can’t be found  functions.php – adds additional functionality and customization Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 13. Non-Blog Template Files  Other page template files  Additional sidebars, footers, etc.  Include files (nav.php, meta.php, search.php, theme options, additional stylesheets)  Custom post types Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 14. Non-PHP Template Files  screenshot.png  favicon.ico  image files (png, jpg, gif)  javascript Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 15. Tools I Like to Use  Notepad++ – text editor  Photoshop – graphics design  Filezilla – file transfer (ftp)  Firebug – debugging code in Firefox Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 16. Resources for Learning  WordPress Codex (codex.wordpress.org)  W3 Schools (w3schools.com)  WP Tuts (wp.tutsplus.com)  Stack Overflow (stackoverflow.com)
  • 17. West Valley WordPress Group  Coming Soon! Here at Gangplank Avondale  www.meetup.com/West-Valley-WordPress-Users/  Open to all skill levels!!!  Dharma Kelleher, Lisa Faiss and Cody Landefeld to facilitate Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 18. Your Freebie!  Create your own theme built on Dharmania  Theme Options and Responsive Width  Upload into your themes folder  www.kelleherwebdesign.com/free-stuff/ Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 19. Please Stalk Me!  My Website – www.kelleherwebdesign.com  Follow me on Facebook, Twitter, LinkedIn and Google+ (links are on my website)  Punk the Web (my blog) – Great articles on design and marketing. Subscribe or else!  Email: dharma@kelleherwebdesign.com Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com
  • 20. Any Questions? Dharma Kelleher - Kelleher Web Design www.kelleherwebdesign.com