Creating Custom Wordpress themes and admin tools #wcphx 2014

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.

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.

Matt Adams @mattada

Where to start?

codex.wordpress.org

Matt Adams @mattada

Getting started.
the bare bones theme needs

Matt Adams @mattada

All themes need two
simple files < at the minimum
index.php
style.css

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

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.

Matt Adams @mattada

The Loop looks like this:


<?php endwhile; ?>

<?php else : ?>

<?php endif ?>

The Loop with some content


<?php the_title(); ?>

<?php the_content();?>

<?php endwhile; ?>

!

<?php else : ?>

<?php endif ?>

<h2>Not Found</h2>

The result:

Matt Adams @mattada

Template files.
controlling the chaos

Matt Adams @mattada

Common template files

index.php
page.php
single.php
archive.php
tag.php
category.php
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

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

Matt Adams @mattada

So now what?
Moving from HTML to WP

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

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>© <?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 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 the_title('<h1>','</h1>'); ?>

<?php the_content(); ?>

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



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

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.

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:

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.

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

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


New page template - page-home.php
<?php
/*Template Name: Home Page */
get_header(); ?>
<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">


<a href="">

<img src="http://placehold.it/250x250">

</a>

</div>

</div><!— Close the home_action row —>

!


The result:

But where did the hero image go?
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
?>

What if i go from:

to something bigger:

2 options.
a. Remove the image and re-upload
b. Use a plugin to regenerate the thumbnails

http://wordpress.org/plugins/regenerate-thumbnails/

Matt Adams @mattada

Adding additional
content inputs
Giving the admin power

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

Matt Adams @mattada

Creating our ACF group and elements

Matt Adams @mattada


ACF post / page options

Matt Adams @mattada


Adding the first custom field

Matt Adams @mattada

The resulting custom field
Editing the home page using the page-home.php

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">


<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.

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.

Matt Adams @mattada

Resources
Where to learn more

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

Matt Adams @mattada

Creating Custom Wordpress themes and admin tools #wcphx 2014

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (9)

Featured

Featured (20)

Creating Custom Wordpress themes and admin tools #wcphx 2014