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...
Assumptions.
We need to assume a few things for today.
1. You have used wordpress and are familiar
with basic themes, opti...
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=...
style.css
/*	
Theme Name: Wordcamp theme 1	
Theme URI: http://www.yoursiteURL.com	
Description: A short intro about this p...
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 po...
The Loop looks like this:
	

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>	

	

	

	

<?php endwhile; ?>...
The Loop with some content
	

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>	

	

	

	

<?php the_title()...
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 ...
Template order of operations
is_home

home.php

is_front_page

home-page.php

is_404

404.php

is_search

search.php

is_d...
Common Variable Templates

tag-id.php
tag-slug.php
category-id.php
category-slug.php
single-posttype.php

Custom WP themes...
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

...
Build the header.php
<html>	
<head>	
	

<title><?php wp_title();?></title>	

	

<?php wp_head(); ?>	

	
	

<link type="tex...
Build the footer.php
<footer class=“row”>	
	

<p>&copy; <?php date('Y'); bloginfo(‘name’);?></p>	

</footer>

</body>	
<?p...
Build the page.php
<?php get_header(); ?>
<div class=“page row”>
<div class=“medium-8 columns”>	
<?php if (have_posts()) :...
Build the page.php
<?php get_header(); ?>
<div class=“page row”>
<div class=“medium-8 columns”>	
<?php if (have_posts()) :...
Build sidebar.php
<?php if ( ! dynamic_sidebar() ) : ?>	
	

<!-- Do sidebar widgets here -->

<!— Default content in case ...
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 ...
Creating the functions.php
<?php	
// One PHP tag at the top for all your functions	

!
!
register_sidebar( array(	
	

	

'...
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...
Register the menu on functions.php
// Register WP3 theme menus	
register_nav_menus( array(	
	

	

'primary' => __( 'Primar...
Add the wp_nav_menu to header.php
<nav>	
<?php wp_nav_menu( array('theme_location' => 'primary' ) ); ?>	
</nav>

Outputs:
...
Lets build a home page

Logo & Nav

Hero Image

Call to
action 1

Header.php
Featured

Image

Call to
action 2
Footer

Cus...
New page template - page-home.php
<?php 	
/*Template Name: Home Page */	
get_header(); ?>

/*Template Name:__________*/ 

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

Advance...
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 f...
For our home call to action
we need an image URL.
<div class="home_action row">	
	

<div class="medium-4 columns">	

	

<a...
Additional content

opportunities
via functions.php
Custom post types like Portfolios, Staff,
Testimonials, Case Studies, ...
Combo these up
for the win!
Register a Custom post type for a portfolio.
Then add in custom fields for details
Now use the...
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...
Upcoming SlideShare
Loading in …5
×

Creating Custom Wordpress themes and admin tools #wcphx 2014

6,331 views
6,076 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,331
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating Custom Wordpress themes and admin tools #wcphx 2014

  1. 1. Creating Themes & Customizing the Admin Panel Matt Adams @mattada
  2. 2. #ilovewordpress Custom WP themes & Admin Matt Adams @mattada
  3. 3. 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
  4. 4. 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
  5. 5. Where to start? codex.wordpress.org Custom WP themes & Admin Matt Adams @mattada
  6. 6. Getting started. the bare bones theme needs Custom WP themes & Admin Matt Adams @mattada
  7. 7. All themes need two simple files < at the minimum index.php style.css Custom WP themes & Admin Matt Adams @mattada
  8. 8. 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>
  9. 9. 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 */
  10. 10. The Loop. some wp magic Custom WP themes & Admin Matt Adams @mattada
  11. 11. 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
  12. 12. 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. -->
  13. 13. 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>
  14. 14. The result: Custom WP themes & Admin Matt Adams @mattada
  15. 15. Template files. controlling the chaos Custom WP themes & Admin Matt Adams @mattada
  16. 16. Common template files index.php page.php single.php archive.php tag.php category.php Custom WP themes & Admin Matt Adams @mattada
  17. 17. 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
  18. 18. 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
  19. 19. So now what? Moving from HTML to WP Custom WP themes & Admin Matt Adams @mattada
  20. 20. 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
  21. 21. 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='); ?>
  22. 22. Build the footer.php <footer class=“row”> <p>&copy; <?php date('Y'); bloginfo(‘name’);?></p> </footer>
 </body> <?php wp_footer();?> </html>
  23. 23. 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(); ?>
  24. 24. 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 —>
  25. 25. 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; ?>
  26. 26. Functions! Telling WP how it is Custom WP themes & Admin Matt Adams @mattada
  27. 27. 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
  28. 28. 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! ?>
  29. 29. The Result: Custom WP themes & Admin Matt Adams @mattada
  30. 30. 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
  31. 31. 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
  32. 32. 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>
  33. 33. 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
  34. 34. 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(); ?>
  35. 35. 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(); ?>
  36. 36. The result: But where did the hero image go? Custom WP themes & Admin Matt Adams @mattada
  37. 37. 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 ?>
  38. 38. The Result: Custom WP themes & Admin Matt Adams @mattada
  39. 39. 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
  40. 40. Adding additional content inputs Giving the admin power Custom WP themes & Admin Matt Adams @mattada
  41. 41. 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
  42. 42. Creating our ACF group and elements Custom WP themes & Admin Matt Adams @mattada
  43. 43. Creating our ACF group and elements ACF post / page options Custom WP themes & Admin Matt Adams @mattada
  44. 44. Creating our ACF group and elements Adding the first custom field Custom WP themes & Admin Matt Adams @mattada
  45. 45. The resulting custom field Editing the home page using the page-home.php Custom WP themes & Admin Matt Adams @mattada
  46. 46. 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>'; } ?>'); ?>
  47. 47. 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:
  48. 48. 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
  49. 49. 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
  50. 50. The Result: Custom WP themes & Admin Matt Adams @mattada
  51. 51. Resources Where to learn more Custom WP themes & Admin Matt Adams @mattada
  52. 52. 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

×