WordPress Theming & Frameworks Essentials

Thessaloniki 22 Oct 2016

Transcript

1. WordPress
   Theming & Frameworks
   Essentials
   

   View Slide

2. WordPress Theming & Frameworks Essentials
   

   View Slide

3. Athanasiadis Evagelos
   General Translation Editor
   WordPress Meetup Organizer
   WordPress Member Since 2005
   WordPress Theming & Frameworks Essentials
   @eathanasiadis
   athanasiadis.me
   

   View Slide

4. Content is the King?
   WordPress Theming & Frameworks Essentials
   WordPress Theming & Frameworks Essentials
   

   View Slide

5. WordPress Theming & Frameworks Essentials
   Fundamentally, the WordPress Theme system is a way
   to "skin” your weblog. Yet, it is more than
   just a "skin." Skinning your site implies that only
   the design is changed. WordPress Themes can
   provide much more control over the look and
   presentation of the material on your website.
   WordPress Theming & Frameworks Essentials
   

   View Slide

6. Why Use a Theme?
   WordPress Theming & Frameworks Essentials
   WordPress Theming & Frameworks Essentials
   

   View Slide

7. The Face
   WordPress Theming
   WordPress Theming & Frameworks Essentials
   WordPress Theming & Frameworks Essentials
   

   View Slide

8. WordPress Theming
   WordPress Theming & Frameworks Essentials
   • Hard To Read
   • Difficult UI
   • Slow
   • Ugly
   WordPress Theming & Frameworks Essentials
   

   View Slide

9. WordPress Theming
   WordPress Theming & Frameworks Essentials
   WordPress Theming & Frameworks Essentials
   

   View Slide

10. WordPress Theming
    WordPress Theming & Frameworks Essentials
    What is a theme?
    WordPress Theming & Frameworks Essentials
    

    View Slide

11. WordPress Theming
    What is a template
    WordPress Theming & Frameworks Essentials
    

    View Slide

12. WordPress Theming
    Template Files
    WordPress Theming & Frameworks Essentials
    

    View Slide

13. Template Hierarchy
    WordPress Theming & Frameworks Essentials
    

    View Slide

14. The Bare Minimum
    WordPress Theming & Frameworks Essentials
    •style.css
    •index.php
    functions.php
    

    View Slide

15. style.css
    WordPress Theming & Frameworks Essentials
    /*
    Theme Name: Twenty Thirteen
    Theme URI: http://wordpress.org/themes/twentythirteen
    Author: the WordPress team
    Author URI: http://wordpress.org/
    Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each
    displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching
    header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-
    header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post,
    translation-ready
    Text Domain: twentythirteen
    This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've
    learned with others.
    */
    

    View Slide

16. index.php
    WordPress Theming & Frameworks Essentials
    

    View Slide

17. index.php
    WordPress Theming & Frameworks Essentials
    

    View Slide

18. The Loop
    WordPress Theming & Frameworks Essentials
    while ( have_posts() ) {
    the_post();
    //
    //
    Post Content here
    //
    }
    // end while }
    // end if
    ?>
    
    https://codex.wordpress.org/Theme_Development
    

    View Slide

19. Starter Themes
    WordPress Theming & Frameworks Essentials
    • Scratch
    • Starter Themes
    • Frameworks
    

    View Slide

20. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    • Faster and Easier Development
    • Fits to anyone
    • Quality
    • Community & Support
    • Don’t Break after Upgrades
    

    View Slide

21. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    • Bones
    • Cherry Framework
    • JointsWP
    • Skeleton
    • Underscores
    • ….
    https://athanasiadis.me/wordpress-frameworks/
    

    View Slide

22. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    https://athanasiadis.me/wordpress-frameworks/
    https://includewp.com
    

    View Slide

23. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    http://themble.com/bones/
    

    View Slide

24. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    http://www.getbeans.io
    

    View Slide

25. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    https://foundationpress.olefredrik.com
    

    View Slide

26. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    http://maddisondesigns.com/quark/
    

    View Slide

27. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    http://maddisondesigns.com/quark/
    

    View Slide

28. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    http://themehybrid.com/hybrid-core
    

    View Slide

29. Starter & Frameworks Themes
    WordPress Theming & Frameworks Essentials
    http://underscores.me
    

    View Slide

30. Child Themes
    WordPress Theming & Frameworks Essentials
    https://codex.wordpress.org/Child_Themes
    Style.css
    

    View Slide

31. Child Themes
    WordPress Theming & Frameworks Essentials
    https://codex.wordpress.org/Child_Themes
    functions.php
    

    View Slide

32. Child Themes
    WordPress Theming & Frameworks Essentials
    https://codex.wordpress.org/Child_Themes
    functions.php
    

    View Slide

33. WordPress Theming & Frameworks Essentials
    

    View Slide