Creating Custom Wordpress themes and admin tools #wcphx 2014
Upcoming SlideShare
Loading in...5
×
 

Creating Custom Wordpress themes and admin tools #wcphx 2014

on

  • 4,399 views

Creating Custom Wordpress themes and admin tools from the WordCamp 2014 talk in Chandler AZ, WordCamp Phoenix

Creating Custom Wordpress themes and admin tools from the WordCamp 2014 talk in Chandler AZ, WordCamp Phoenix

Statistics

Views

Total Views
4,399
Views on SlideShare
4,358
Embed Views
41

Actions

Likes
0
Downloads
23
Comments
0

3 Embeds 41

http://creativestrategies.com 36
https://twitter.com 3
https://savidinedvg.wordpress.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating Custom Wordpress themes and admin tools #wcphx 2014 Creating Custom Wordpress themes and admin tools #wcphx 2014 Presentation Transcript

  • Creating Themes & Customizing the Admin Panel Matt Adams @mattada
  • #ilovewordpress Custom WP themes & Admin Matt Adams @mattada
  • So why custom? “Premium” themes are often difficult
 or bloated with scripts. Meeting the needs of the client specifically. Custom WP themes & Admin Matt Adams @mattada
  • Assumptions. We need to assume a few things for today. 1. You have used wordpress and are familiar with basic themes, options and settings. 2. You have some level of HTML & CSS experience, and are comfortable with code. Custom WP themes & Admin Matt Adams @mattada
  • Where to start? codex.wordpress.org Custom WP themes & Admin Matt Adams @mattada
  • Getting started. the bare bones theme needs Custom WP themes & Admin Matt Adams @mattada
  • All themes need two simple files < at the minimum index.php style.css Custom WP themes & Admin Matt Adams @mattada
  • Index.php <html> <head> <title><?php wp_title();?></title> <?php wp_head(); ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css"> </head> <body> <header> <h1><?php bloginfo('name');?></h1> <nav><?php wp_list_pages('title_li='); ?></nav> </header> ! <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <?php the_content();?> </article> <?php endwhile; ?> <?php endif ?> <p>&copy; <?php date('Y'); bloginfo(‘name');?></p> ! </body> <?php wp_footer();?> </html>
  • style.css /* Theme Name: Wordcamp theme 1 Theme URI: http://www.yoursiteURL.com Description: A short intro about this project Author: matt adams Author URI: http://factor1studios.com Version: 1.0 */
  • The Loop. some wp magic Custom WP themes & Admin Matt Adams @mattada
  • Introducing The Loop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. Custom WP themes & Admin Matt Adams @mattada
  • The Loop looks like this: <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php else : ?> <?php endif ?> <!-- Do post and page content stuff --> <!-- Do stuff after the posts --> <!-- Not found, lets inform the visitor of that. -->
  • The Loop with some content <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_title(); ?> <?php the_content();?> <?php endwhile; ?> ! <?php else : ?> <?php endif ?> <h2>Not Found</h2>
  • The result: Custom WP themes & Admin Matt Adams @mattada
  • Template files. controlling the chaos Custom WP themes & Admin Matt Adams @mattada
  • Common template files index.php page.php single.php archive.php tag.php category.php Custom WP themes & Admin Matt Adams @mattada
  • Template order of operations is_home home.php is_front_page home-page.php is_404 404.php is_search search.php is_date date.php author-nicename.php author-id.php author.php category-slug.php category-id.php category.php is_tag tag-slug.php tag-id.php tag.php is_tax taxonomy-taxonomy-term.php taxonomy-taxonomy.php taxonomy.php is_author is_category archive-posttype.php is_archive single-posttype.php is_single is_attachement MIME_type.php attachment.php is_page page-slug.php page-id.php single.php Custom WP themes & Admin Matt Adams @mattada page.php archive.php index.php
  • Common Variable Templates tag-id.php tag-slug.php category-id.php category-slug.php single-posttype.php Custom WP themes & Admin Matt Adams @mattada
  • So now what? Moving from HTML to WP Custom WP themes & Admin Matt Adams @mattada
  • Identify the key sections Header.php Logo & Nav Page Body Sidebar Recent post 1 Sidebar.php Recent post 2 page.php Footer Footer.php Custom WP themes & Admin Matt Adams @mattada
  • Build the header.php <html> <head> <title><?php wp_title();?></title> <?php wp_head(); ?> <link type="text/css" rel="stylesheet" 
 href="https://cdn.jsdelivr.net/foundation/5.0.2/css/foundation.min.css"> <link rel=“stylesheet"
 href="<?php bloginfo('stylesheet_url');?>" type="text/css"> </head> <body> <header class=“row”> <h1> <a href=“<?php echo home_url(); ?>"> <?php bloginfo(‘name');?> </a></h1> <nav> </nav> </header> <?php wp_list_pages('title_li='); ?>
  • Build the footer.php <footer class=“row”> <p>&copy; <?php date('Y'); bloginfo(‘name’);?></p> </footer>
 </body> <?php wp_footer();?> </html>
  • Build the page.php <?php get_header(); ?> <div class=“page row”> <div class=“medium-8 columns”> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_title('<h1>','</h1>'); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </div> <div class=“medium-4 columns sidebar”> <?php get_sidebar(); ?> </div> </div><!— End page / row —> <?php get_footer(); ?>
  • Build the page.php <?php get_header(); ?> <div class=“page row”> <div class=“medium-8 columns”> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_title('<h1>','</h1>'); ?> <?php the_content(); ?> <?php endwhile; endif; ?> <!— Lets make space for the on page loop —> <div class=“row featuredposts”> <?php $the_query = new WP_Query( $args ); $args = array( 'numberposts' => 2 ); $the_query = get_posts( $args ); foreach( $the_query as $post ) : setup_postdata($post); ?> <div class=“medium-6 columns"> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?> <?php the_excerpt(); ?> </div> <?php endforeach; ?> ! </div><!— End the featured posts row —> </div><!— End the medium-8 column —>
  • Build sidebar.php <?php if ( ! dynamic_sidebar() ) : ?> <!-- Do sidebar widgets here --> <!— Default content in case we dont have a widget area active —> <h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> <h2>Categories</h2> <ul> <?php wp_list_categories('show_count=1&title_li='); ?> </ul> <?php wp_list_bookmarks(); ?> <h2>Subscribe</h2> <ul> <li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li> <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li> </ul> <?php endif; ?>
  • Functions! Telling WP how it is Custom WP themes & Admin Matt Adams @mattada
  • Introducing the functions.php The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site. You can use it to call functions, both PHP and built-in WordPress, and to define your own functions. Custom WP themes & Admin Matt Adams @mattada
  • Creating the functions.php <?php // One PHP tag at the top for all your functions ! ! register_sidebar( array( 'name' => __( 'Main Sidebar' ), 'id' => 'sidebar', 'description' => __( 'The primary widget area right side'), 'before_widget' => '<div id="%1$s" class=“widget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ) ); ! ! ! // Close the PHP tag after ALL your functions are done! ?>
  • The Result: Custom WP themes & Admin Matt Adams @mattada
  • Introducing WP menus As of wordpress 3.0 and newer, we can quickly and easily add menu support and easy administration of the navigation to any theme. Custom WP themes & Admin Matt Adams @mattada
  • Register the menu on functions.php // Register WP3 theme menus register_nav_menus( array( 'primary' => __( 'Primary Navigation' ), 'utility' => __( 'Utility Links' ), 'socialmedia' => __( 'Social Media Links') ) ); We can register as many as we want!
 Each will be editable in WP menus
  • Add the wp_nav_menu to header.php <nav> <?php wp_nav_menu( array('theme_location' => 'primary' ) ); ?> </nav> Outputs: <nav> <div class="menu"> <ul><li class="page_item page-item-19 current_page_item"><a href="http:// yoururl/2014_wordcamp/">Home page</a></li><li class="page_item page-item-7"><a href="http://yoururl/2014_wordcamp/?page_id=7">Ipsum!</a></li><li class="page_item page-item-2"><a href="http://yoururl/2014_wordcamp/? page_id=2">Sample Page</a></li><li class="page_item page-item-14"><a href="http://yoururl/2014_wordcamp/?page_id=14">User engagement</a></li> </ul> </div> </nav>
  • Lets build a home page Logo & Nav Hero Image Call to action 1 Header.php Featured
 Image Call to action 2 Footer Custom WP themes & Admin Matt Adams @mattada Call to action 3 3 on page
 Elements Footer.php
  • New page template - page-home.php <?php /*Template Name: Home Page */ get_header(); ?> /*Template Name:__________*/ 
 gets us this menu
 in the page edit screen <?php get_footer(); ?>
  • New page template - page-home.php <?php /*Template Name: Home Page */ get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="hero row"> <div class="medium-12 columns"> </div> <?php the_post_thumbnail('hero'); ?> </div><!— Close the hero row —> ! <div class="home_action row"> <div class="medium-4 columns"> <a href=""> <img src="http://placehold.it/250x250"> </a> </div> </div><!— Close the home_action row —> ! <?php endwhile; endif; ?> <?php get_footer(); ?>
  • The result: But where did the hero image go? Custom WP themes & Admin Matt Adams @mattada
  • Adding featured images to our functions.php <?php ! // Add thumbnail support if ( function_exists('add_theme_support') ) add_theme_support('post-thumbnails'); ?> Set the custom crop size <?php add_image_size( $name, $width, $height, $crop ); ?> Full code True: Crops to center
 False: Reduces to max size <?php ! // Add thumbnail support if ( function_exists('add_theme_support') ) add_theme_support('post-thumbnails'); add_image_size( 'hero', 1000, 400, true ); // Homepage Hero Image ?>
  • The Result: Custom WP themes & Admin Matt Adams @mattada
  • What if i go from: add_image_size( 'hero', 1000, 400, true ); // Homepage Hero Image to something bigger: add_image_size( 'hero', 1000, 500, true ); // Homepage Hero Image 2 options. a. Remove the image and re-upload b. Use a plugin to regenerate the thumbnails http://wordpress.org/plugins/regenerate-thumbnails/ Custom WP themes & Admin Matt Adams @mattada
  • Adding additional content inputs Giving the admin power Custom WP themes & Admin Matt Adams @mattada
  • Managing our home page call to actions Call to action 1 Call to action 2 Call to action 3 3 on page
 Elements Advanced Custom Fields plugin http://wordpress.org/plugins/advanced-custom-fields/
 By Elliot Condon Custom WP themes & Admin Matt Adams @mattada
  • Creating our ACF group and elements Custom WP themes & Admin Matt Adams @mattada
  • Creating our ACF group and elements ACF post / page options Custom WP themes & Admin Matt Adams @mattada
  • Creating our ACF group and elements Adding the first custom field Custom WP themes & Admin Matt Adams @mattada
  • The resulting custom field Editing the home page using the page-home.php Custom WP themes & Admin Matt Adams @mattada
  • Getting the custom fields on the template <?php the_field('image_test'); ?> The field name assigned when we created the field Using a conditional statement <?php if(get_field('field_name')) { echo '<p>' . get_field('field_name') . '</p>'; } ?>'); ?>
  • For our home call to action we need an image URL. <div class="home_action row"> <div class="medium-4 columns"> <a href=""> </a> <img src="<?php the_field('item1_image'); ?>"> </div> Results:
  • Additional content
 opportunities via functions.php Custom post types like Portfolios, Staff, Testimonials, Case Studies, Products, etc. Registering new javascript libraries, removing admin panels or pages. Custom WP themes & Admin Matt Adams @mattada
  • Combo these up for the win! Register a Custom post type for a portfolio. Then add in custom fields for details Now use the archive-posttype.php to display. Custom WP themes & Admin Matt Adams @mattada
  • The Result: Custom WP themes & Admin Matt Adams @mattada
  • Resources Where to learn more Custom WP themes & Admin Matt Adams @mattada
  • codex.wordpress.org
 All things official code base & support digwp.com
 Articles and Books on WP generatewp.com
 Tools for functions, post types, loops, etc. build.codepoet.com
 Tutorials, interviews and best practices Custom WP themes & Admin Matt Adams @mattada