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

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 2

Footer

Header.php

Sidebar.php

Footer.php

page.php

Build the header.php

</body><?php wp_footer();?></html>

Build the footer.php

<?php get_header(); ?>

Build the page.php

<?php get_footer(); ?>

</div><!— End page / row —>

<?php get_header(); ?>

Build the page.php

<!— 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

Creating Custom Wordpress themes and admin tools #wcphx 2014

Self Improvement

WordPress Business themes

Best CrowdFunding WordPress Themes

WordPress Premium Themes

Child themes no WordPress

WordPress Child Themes

Free Wordpress Themes

Responsive Design with WordPress (WCPHX)

Beckydavisdesign.com @beckyddesign WordPress Themes

Three files, unlimited layouts: The designer's guide to WordPress freedom. #wcphx

Child Themes in WordPress

Best Pinterest WordPress Themes

Best Resume WordPress Themes

Flexing Your WordPress Themes

Make WordPress Themes

Our wordpress themes gallery

Wordpress Themes

Beautiful WordPress themes

Wordpress News Themes

Insider's Guide to Marketing & Selling with WordPress [#WCPHX]

Best Wordpress Video Themes