Creating Custom Wordpress themes and admin tools #wcphx 2014

Creating Themes & Customizing

the Admin Panel

Matt Adams @mattada

Custom WP themes & Admin Matt Adams @mattada

#ilovewordpress


So why custom?“Premium” themes are often difficult

or bloated with scripts.

Meeting the needs of the client specifically.


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.


Where to start?

codex.wordpress.org


Getting started.the bare bones theme needs


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


The Loop.some wp magic


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(); ?>  <?php endwhile; ?>  <?php else : ?>  <?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


The result:


Template files.controlling the chaos


index.php

page.php

single.php

archive.php

tag.php

category.php

Common template files


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


tag-id.php

tag-slug.php

category-id.php

category-slug.php

single-posttype.php

Common Variable Templates


So now what?Moving from HTML to WP


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() ) : ?> 

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; ?>


Functions!Telling WP how it is


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


The Result:


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:


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


/*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 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; ?>


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


The Result:


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/


Adding additional content inputs

Giving the admin power


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


Creating our ACF group and elements



ACF post / page options



Adding the first custom field


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:


Additional contentopportunities

via functions.phpCustom post types like Portfolios, Staff,

Testimonials, Case Studies, Products, etc.

Registering new javascript libraries, removing admin panels or pages.


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.


The Result:


ResourcesWhere to learn more


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

http://codex.wordpress.org

http://digwp.com

http://generatewp.com

http://build.codepoet.com

Self Improvement

Creating Custom Wordpress themes and admin tools #wcphx 2014