creating custom wordpress themes and admin tools #wcphx 2014
DESCRIPTION
Creating Custom Wordpress themes and admin tools from the WordCamp 2014 talk in Chandler AZ, WordCamp PhoenixTRANSCRIPT
Creating Themes & Customizing
the Admin Panel
Matt Adams @mattada
Custom WP themes & Admin 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
index.phpstyle.css
< at the minimum
<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>© <?php date('Y'); bloginfo(‘name');?></p>!</body><?php wp_footer();?></html>
Index.php
/*Theme Name: Wordcamp theme 1Theme URI: http://www.yoursiteURL.comDescription: A short intro about this projectAuthor: matt adamsAuthor URI: http://factor1studios.comVersion: 1.0*/
style.css
Custom WP themes & Admin Matt Adams @mattada
The Loop.some wp magic
Custom WP themes & Admin Matt Adams @mattada
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.
Introducing The Loop
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- Do post and page content stuff --> <?php endwhile; ?> <!-- Do stuff after the posts --> <?php else : ?> <!-- Not found, lets inform the visitor of that. --> <?php endif ?>
The Loop looks like this:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_title(); ?> <?php the_content();?> <?php endwhile; ?>! <?php else : ?> <h2>Not Found</h2> <?php endif ?>
The Loop with some content
Custom WP themes & Admin Matt Adams @mattada
The result:
Custom WP themes & Admin Matt Adams @mattada
Template files.controlling the chaos
Custom WP themes & Admin Matt Adams @mattada
index.php
page.php
single.php
archive.php
tag.php
category.php
Common template files
Custom WP themes & Admin Matt Adams @mattada
Template order of operations
is_home
is_front_page
is_404
is_search
is_date
is_author
is_category
is_tag
is_tax
is_archive
is_single
is_attachement
is_page
home.php
home-page.php
404.php
search.php
date.php
author.php
category.php
tag.php
taxonomy.php
single.php
page.php
archive.php index.php
author-nicename.php
category-slug.php
tag-slug.php
taxonomy-taxonomy-term.php
MIME_type.php
page-slug.php
author-id.php
category-id.php
tag-id.php
taxonomy-taxonomy.php
archive-posttype.php
single-posttype.php
attachment.php
page-id.php
Custom WP themes & Admin Matt Adams @mattada
tag-id.php
tag-slug.php
category-id.php
category-slug.php
single-posttype.php
Common Variable Templates
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
Logo & Nav
Page Body
Sidebar
Recent post 1
Recent post 2
Footer
Header.php
Sidebar.php
Footer.php
page.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> <?php wp_list_pages('title_li='); ?> </nav> </header>
Build the header.php
<footer class=“row”> <p>© <?php date('Y'); bloginfo(‘name’);?></p></footer>
</body><?php wp_footer();?></html>
Build the footer.php
<?php get_header(); ?>
Build the page.php
<?php get_footer(); ?>
<div class=“page row”>
</div><!— End 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>
<?php get_header(); ?>
Build the page.php
<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 —>
<?php if ( ! dynamic_sidebar() ) : ?> <!-- Do sidebar widgets here -->
Build sidebar.php
<!— 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; ?>
Custom WP themes & Admin Matt Adams @mattada
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.
<?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!?>
Creating the functions.php
Custom WP themes & Admin Matt Adams @mattada
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.
// Register WP3 theme menusregister_nav_menus( array( 'primary' => __( 'Primary Navigation' ), 'utility' => __( 'Utility Links' ), 'socialmedia' => __( 'Social Media Links') ) );
Register the menu on functions.php
We can register as many as we want!Each will be editable in WP menus
<nav><?php wp_nav_menu( array('theme_location' => 'primary' ) ); ?></nav>
Add the wp_nav_menu to header.php
<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>
Outputs:
Custom WP themes & Admin Matt Adams @mattada
Lets build a home page
Logo & Nav
Hero Image
Call to action 1
Call to action 2
Footer
Header.php
Footer.php
Call to action 3
FeaturedImage
3 on pageElements
<?php /*Template Name: Home Page */get_header(); ?>
New page template - page-home.php
<?php get_footer(); ?>
/*Template Name:__________*/ gets us this menu
in the page edit screen
<?php /*Template Name: Home Page */get_header(); ?>
New page template - page-home.php
<?php get_footer(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?><div class="hero row"> <div class="medium-12 columns"> <?php the_post_thumbnail('hero'); ?> </div></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; ?>
Custom WP themes & Admin Matt Adams @mattada
The result:
But where did the hero image go?
Adding featured images to our functions.php<?php !// Add thumbnail supportif ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');?>
<?php add_image_size( $name, $width, $height, $crop ); ?>
Set the custom crop size
<?php !// Add thumbnail supportif ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');add_image_size( 'hero', 1000, 400, true ); // Homepage Hero Image?>
Full codeTrue: Crops to centerFalse: Reduces to max size
Custom WP themes & Admin Matt Adams @mattada
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
Call to action 1
Call to action 2
Call to action 3
3 on pageElements
Managing our home page call to actions
Advanced Custom Fields pluginhttp://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
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=""> <img src="<?php the_field('item1_image'); ?>"> </a></div>
Results:
Custom WP themes & Admin Matt Adams @mattada
Additional contentopportunities
via functions.phpCustom 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
ResourcesWhere to learn more
Custom WP themes & Admin Matt Adams @mattada
codex.wordpress.org All things official code base & support
digwp.comArticles and Books on WP
generatewp.comTools for functions, post types, loops, etc.
build.codepoet.com Tutorials, interviews and best practices