0
Turning your design into a
WordPress Theme

Adam Darowski
BatchBlue Software, LLC

NewBCamp 2.8.09
What is WordPress?

    Open source publishing platform
•

    Two “versions”:
•

        WordPress.com
    -

        Wor...
What is a WordPress Theme?

                WordPress Code
            The inner workings that you don’t
                 ...
What is a theme made of?

    PHP files
•

        Grabs info from database to make HTML.
    -

    CSS styles
•

       ...
What is a theme made of?




    Tabigail Theme
    http://tabigail.com


5
What is a theme made of?




6
What is a theme made of?
                  header.php




7
What is a theme made of?
                  header.php




                  footer.php

8
What is a theme made of?
                  header.php




                               sidebar.php
                  foo...
What is a theme made of?
                  header.php




                                sidebar.php
                 ind...
What is a theme made of?
                    header.php


                  single.php




                               ...
What is a theme made of?
                   header.php


                   page.php




                                 ...
What is a theme made of?
                    header.php




                                  sidebar.php
                ...
What is a theme made of?
                   header.php




                                  sidebar.php
                 ...
What is a theme made of?
                   header.php




                                  sidebar.php
                 ...
What is a theme made of?
                  header.php




                               sidebar.php
                  foo...
What is a theme made of?




17
What is a theme made of?




18
What is a theme made of?




19
Hooking it up

     Header logo
•



     <h1>
     <a href=quot;http://www.darowski.com/
     tracesofinspirationquot; ti...
Hooking it up

     Header logo
•



     <h1>
     <a href=quot;<?php echo
     get_settings('home'); ?>quot; title=quot;...
Hooking it up

     Header logo
•



     <h1>
     <a href=quot;<?php echo
     get_settings('home'); ?>quot; title=quot;...
Hooking it up

     Header logo
•



     <h1>
     <a href=quot;<?php echo
     get_settings('home'); ?>quot; title=quot;...
Now, let’s play!




24
Thank you!

Adam Darowski
User Experience Designer
BatchBlue Software, LLC

email: adarowski@batchblue.com
gtalk: adarowsk...
Upcoming SlideShare
Loading in...5
×

NewBCamp09: Turning your design into a WordPress Theme

5,830

Published on

At NewBCamp '09, I live-built the front page of a WordPress theme. Here are the slides I used before building to explain the parts of a WordPress theme.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,830
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
67
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "NewBCamp09: Turning your design into a WordPress Theme"

  1. 1. Turning your design into a WordPress Theme Adam Darowski BatchBlue Software, LLC NewBCamp 2.8.09
  2. 2. What is WordPress? Open source publishing platform • Two “versions”: • WordPress.com - WordPress.org - Other publishing platforms: • - Drupal, TypePad, Movable Type, Expression Engine, and many, many more. 2
  3. 3. What is a WordPress Theme? WordPress Code The inner workings that you don’t want to touch. Themes Plugins Change how it looks. Change how it acts. 3
  4. 4. What is a theme made of? PHP files • Grabs info from database to make HTML. - CSS styles • Defines how that HTML should look. - Images • For the template only - 4
  5. 5. What is a theme made of? Tabigail Theme http://tabigail.com 5
  6. 6. What is a theme made of? 6
  7. 7. What is a theme made of? header.php 7
  8. 8. What is a theme made of? header.php footer.php 8
  9. 9. What is a theme made of? header.php sidebar.php footer.php 9
  10. 10. What is a theme made of? header.php sidebar.php index.php (Home Page) footer.php 10
  11. 11. What is a theme made of? header.php single.php sidebar.php (Single Post) comments.php (Comments) footer.php 11
  12. 12. What is a theme made of? header.php page.php sidebar.php (Static Page) comments.php (Comments) footer.php 12
  13. 13. What is a theme made of? header.php sidebar.php archive.php (Archive Pages) footer.php 13
  14. 14. What is a theme made of? header.php sidebar.php search.php (Search Results) footer.php 14
  15. 15. What is a theme made of? header.php sidebar.php 404.php (Page Not Found) footer.php 15
  16. 16. What is a theme made of? header.php sidebar.php footer.php 16
  17. 17. What is a theme made of? 17
  18. 18. What is a theme made of? 18
  19. 19. What is a theme made of? 19
  20. 20. Hooking it up Header logo • <h1> <a href=quot;http://www.darowski.com/ tracesofinspirationquot; title=quot;Traces of Inspirationquot;>Traces of Inspiration</a> </h1> 20
  21. 21. Hooking it up Header logo • <h1> <a href=quot;<?php echo get_settings('home'); ?>quot; title=quot;<?php bloginfo('name'); ?>quot;><?php bloginfo('name'); ?></a> </h1> 21
  22. 22. Hooking it up Header logo • <h1> <a href=quot;<?php echo get_settings('home'); ?>quot; title=quot;<?php bloginfo('name'); ?>quot;><?php bloginfo('name'); ?></a> </h1> 22
  23. 23. Hooking it up Header logo • <h1> <a href=quot;<?php echo get_settings('home'); ?>quot; title=quot;<?php bloginfo('name'); ?>quot;><?php bloginfo('name'); ?></a> </h1> 23
  24. 24. Now, let’s play! 24
  25. 25. Thank you! Adam Darowski User Experience Designer BatchBlue Software, LLC email: adarowski@batchblue.com gtalk: adarowski@gmail.com twitter: @adarowski business blog: blog.batchblue.com personal blog: darowski.com 25
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×