Intro to WordPress Theme Development

Transcript

1. I N T R O T O W O R D P R E S S
   T H E M E D E V E L O P M E N T
   @ S O C A LW P M E E T U P J U N E 1 8 , 2 0 1 4
   

   View Slide

2. @ M O D E M L O O P E R
   Ryan
   

   View Slide

3. W H AT I S A
   T H E M E ?
   T H E M E S
   

   View Slide

4. A WordPress theme is utilized to
   give structure and design to the
   content of a site.
   It’s what people see when they visit
   a site from a web browser.
   

   View Slide

5. WordPress theme files are located at
   url.com/wp-content/themes
   

   View Slide

6. T H E M E C O M P O N E N T S
   • Template files
   • CSS files
   • Javascript files ?
   

   View Slide

7. Y O U O N LY N E E D T H E S E T W O
   F I L E S T O A C T I VAT E A T H E M E I N
   W O R D P R E S S
   • index.php
   • style.css
   

   View Slide

8. This is a themes main
   style sheet and contains
   information WordPress
   uses to install a theme.
   S T Y L E . C S S
   

   View Slide

9. /*
   Theme Name: Twenty Twelve
   Theme URI: http://wordpress.org/themes/twentytwelve
   Author: the WordPress team
   Author URI: http://wordpress.org/
   Description: The 2012 theme for WordPress is a fully responsive theme that looks
   great on any device. Features include a front page template with its own widgets,
   an optional display font, styling for post formats on both index and single views,
   and an optional no-sidebar page template. Make it yours with a custom menu,
   header image, and background.
   Version: 1.4
   */
   

   View Slide

10. .entry-meta {
    clear: both;
    }
    .entry-header {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    }
    .entry-header img.wp-post-image {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    }
    Got Styles?
    

    View Slide

11. I N D E X . P H P
    This is the first template file
    WordPress looks for to
    display content
    codex.wordpress.org/Template_Hierarchy
    

    View Slide

12. O T H E R C O M M O N T E M P L AT E S
    • header.php
    • sidebar.php
    • footer.php
    

    View Slide

13. index.php
    header.php
    footer.php
    sidebar.php
    T Y P I C A L T E M P L AT E S T R U C T U R E
    

    View Slide

14. H E A D E R . P H P
    This includes the html head
    !
    and opening body tag.
    !
    Generally this file includes your
    site navigation.
    
    …
    
    

    View Slide

15. 
    
    
    
    
    
    H E A D E R . P H P
    

    View Slide

16. S I D E B A R . P H P
    This file usually contains
    additional structured content
    you want displayed on every
    page load.
    
    

    View Slide

17. F O O T E R . P H P
    This includes the closing body tag
    !
    This file can also display additional
    content
    
    

    View Slide

18. F O O T E R . P H P
    
    
    

    View Slide

19. I N D E X . P H P
    
    
    
    Here is were you display content. This is
    in the form of a WordPress loop.
    

    View Slide

20. I N D E X . P H P
    
    
    
    
    
    
    
    
    

    View Slide

21. T H E L O O P
    codex.wordpress.org/The_Loop
    

    View Slide

22. F U N C T I O N S . P H P
    The functions file is automatically loaded
    by WordPress and contains functions to
    add functionality to your theme.
    • Sidebars for widgets
    • Navigation menus
    • Style options
    • Template functions
    

    View Slide

23. T H E M E F O L D E R
    themes/
    your-theme/
    index.php
    header.php
    footer.php
    sidebar.php
    page.php
    single.php
    style.css
    

    View Slide

24. L E A R N M O R E
    codex.wordpress.org/Theme_Development
    teamtreehouse.com/library/how-to-build-a-wordpress-theme
    Happy building!
    

    View Slide