BDW WordPress Class Canceled on Monday (29 April)…we will meet at the normal time next week (the 6th of May).
Hit me up with questions.
here i share a few of the things that go on in my head after they are approved by the censors
BDW WordPress Class Canceled on Monday (29 April)…we will meet at the normal time next week (the 6th of May).
Hit me up with questions.
Hey BDW @ Night folks – it looks like CU has canceled classes for the evening – so let’s do the same.
We can talk next week and figure out if we want to re-schedule, do something via skype or google hangouts or extend the class a week.
Let me know if you have any questions.
See ya next week
Hank
The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches.
http://codex.wordpress.org/Conditional_Tags
is_home()
When the main blog page is being displayed.
is_front_page()
When the front of the site is displayed, whether it is posts or a Page.
is_single()
When any single Post (or attachment, or custom Post Type) page is being displayed.
is_page()
When any Page is being displayed.
is_page( 42 )
When Page 42 (ID) is being displayed.
is_page( ‘About Me And Joe’ )
When the Page with a post_title of “About Me And Joe” is being displayed.
is_page( ‘about-me’ )
When the Page with a post_name (slug) of “about-me” is being displayed.
is_page( array( 42, 54, 6 ) )
Returns true when the Pages displayed is either post ID = 42, or post ID = 54, or post ID = 6.
is_page_template( ‘about.php’ )
Is Page Template ‘about’ being used?
is_category()
When any Category archive page is being displayed.
is_category( ’9′ )
When the archive page for Category 9 is being displayed.
is_category( ‘Stinky Cheeses’ )
When the archive page for the Category with Name “Stinky Cheeses” is being displayed.
is_category( ‘blue-cheese’ )
When the archive page for the Category with Category Slug “blue-cheese” is being displayed.
get_post_type()
Returns the registered post type of the current post.
is_preview()
When a single post being displayed is viewed in Draft mode.
if ( is_page( 'about' ) || '2' == $post->post_parent ) { // the page is "About", or the parent of the page is "About" $bannerimg = 'about.jpg'; } elseif ( is_page( 'learning' ) || '56' == $post->post_parent ) { $bannerimg = 'teaching.jpg'; } elseif ( is_page( 'admissions' ) || '15' == $post->post_parent ) { $bannerimg = 'admissions.jpg'; } else { $bannerimg = 'home.jpg'; // just in case we are at an unclassified page, perhaps the home page } |
if ( is_single() ) { echo 'This is just one of many fabulous entries in the ' . single_cat_title() . ' category!'; } |
if ( is_home() || is_single() ) { the_content(); } else { the_excerpt(); } |
Last week we worked with Custom Post types and discussed how they can be used to set up nearly any kind of data entry within WordPress – or examples were chickens…
We briefly looked at how these can be displayed on the front end of the site, but let’s dig in a bit deeper.
This page functions much like the blog listing page for typical posts.
Here’s the code we can use to make it work. We will be using a custom page template to make this work.
$args = array( 'post_type' => 'chickens', 'order' => 'ASC', 'orderby' => 'title', 'posts_per_page' => -1 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); echo '<li><a href="' . get_permalink() . '">'; the_title(); echo '</a></li>'; endwhile; |
This template typically follows the format {custom-post-type-name}-single.php
<div class="small-12 large-8 columns" role="main"> <?php /* Start loop */ ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class() ?> id="post-<?php the_ID(); ?>"> <header> <h1 class="entry-title"><?php the_title(); ?></h1> </header> <div class="entry-content"> <?php the_content(); ?> <?php $meta_values = get_post_meta($post->ID); ?> <ul> <li><strong>Temperament:</strong> <?php echo $meta_values['ecpt_temperament'][0]; ?></li> <li><strong>Egg Yield:</strong> <?php echo $meta_values['ecpt_typicaleggyield'][0]; ?></li> <li><strong>Additional Notes:</strong> <?php echo $meta_values['ecpt_additionalnotes'][0]; ?></li> </ul> </div> <footer> <?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'reverie'), 'after' => '</p></nav>' )); ?> <p><?php the_tags(); ?></p> </footer> </article> <?php endwhile; // End the loop ?> </div> <div class="large-4 columns"> <?php the_post_thumbnail('large'); ?> </div> |
$terms = get_terms("chicken_tags"); echo "<ul>"; foreach ( $terms as $term ) { echo "<li>" . $term->name . "</li>"; } echo "</ul>"; |
You are gonna want to grab this plugin Easy Content Types
Here’s a nice zip file of it. easy-content-types
Chicken Meta
<?php $meta_values = get_post_meta($post->ID); ?> <ul> <li><strong>Temperament:</strong> <?php echo $meta_values['ecpt_temperament'][0]; ?></li> <li><strong>Egg Yield:</strong> <?php echo $meta_values['ecpt_typicaleggyield'][0]; ?></li> <li><strong>Additional Notes:</strong> <?php echo $meta_values['ecpt_additionalnotes'][0]; ?></li> </ul> |
Single Chickens
<?php get_header(); ?> test <!-- Row for main content area --> <div class="small-12 large-8 columns" role="main"> <?php /* Start loop */ ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class() ?> id="post-<?php the_ID(); ?>"> <header> <h1 class="entry-title"><?php the_title(); ?></h1> <?php reverie_entry_meta(); ?> </header> <div class="entry-content"> <?php the_content(); ?> </div> <footer> <?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'reverie'), 'after' => '</p></nav>' )); ?> <p><?php the_tags(); ?></p> </footer> <?php comments_template(); ?> </article> <?php endwhile; // End the loop ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
A Custom Type is a Post Type you define. http://codex.wordpress.org/Post_Types#Custom_Types. Custom Post Types became part of the core in WordPress 3.0.
Potential Custom Post Types
Adding a custom type to WordPress is done via the register_post_type function. This function allows you to define the post type and how it operates within WordPress.
Here’s a basic example of adding a custom post type:
1 2 3 4 5 6 7 8 9 10 11 12 13 | add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'acme_product', array( 'labels' => array( 'name' => __( 'Products' ), 'singular_name' => __( 'Product' ) ), 'public' => true, 'has_archive' => true, ) ); } |
The above example uses 2 labels – but many more are available.
with full arguments it’d look like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 'labels' => array( 'name' => __( 'Super Dupers' ), 'singular_name' => __( 'Super Duper' ), 'add_new' => __( 'Add New' ), 'add_new_item' => __( 'Add New Super Duper' ), 'edit' => __( 'Edit' ), 'edit_item' => __( 'Edit Super Duper' ), 'new_item' => __( 'New Super Duper' ), 'view' => __( 'View Super Duper' ), 'view_item' => __( 'View Super Duper' ), 'search_items' => __( 'Search Super Dupers' ), 'not_found' => __( 'No super dupers found' ), 'not_found_in_trash' => __( 'No super dupers found in Trash' ), 'parent' => __( 'Parent Super Duper' ), ), |
The public argument
catchall argument for several other arguments and defaults to false. Depending on whether it’s set to true or false, it’ll automatically decide what other arguments should be unless they’re specifically defined. If you’re looking for finer control over the public arguments, there are three specific arguments you may set:
1 2 3 4 | 'public' => true, 'show_ui' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, |
Menu Position
By default, a new post type is added after the Comments menu item in the admin. But, you have to ability to move it to a position more suitable for you. Default WordPress menu items are set apart by integrals of 5. For example, using 20 will add your menu item after Pages.
1 | 'menu_position' => 20, |
Menu Icon
New post types will default to the Posts menu icon, but if you want to mix it up a bit or give your post type some separation from other elements, you can define a custom icon. You only have to input a a custom URL to an image file.
1 | 'menu_icon' => get_stylesheet_directory_uri() . '/images/super-duper.png', |
Hierarchical
The hierarchical argument allows you to choose whether you want your post type to be hierarchical. It defaults to false. If you set it to true, your posts will behave like pages in WordPress.
1 | 'hierarchical' => true, |
Query Var
The query_var argument allows you to control the query variable used to get posts of this type. For example, you could use it with the query_posts() function or WP_Query class. This will default to the name of your taxonomy.
1 | 'query_var' => true, |
Supports
The supports argument allows you to define what meta boxes and other fields will appear on the screen when editing or creating a new post. This defaults to title and editor. There are several available options:
1 | 'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail' ), |
Rewrite
The rewrite argument allows you to define the permalink structure
1 | 'rewrite' => array( 'slug' => 'cool', 'with_front' => false ), |
Taxonomies
If you have some preexisting taxonomies (or want to create some) you can allow posts of this type to also use those taxonomies. You just have to set an array of taxonomy names that you’d like for it to use.
1 | 'taxonomies' => array( 'post_tag', 'category '), |
Can Export
You can use the can_export argument to decide whether posts of your post type can be exportable via the WordPress export tool.
1 | 'can_export' => true, |
This is a great post – so we’re just gonna use it.
http://wp.smashingmagazine.com/2012/01/04/create-custom-taxonomies-wordpress/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | function player_taxonomy() { $labels = array( 'name' => _x( 'Team', 'taxonomy general name' ), 'singular_name' => _x( 'Team', 'taxonomy singular name' ), 'search_items' => __( 'Search Teams' ), 'all_items' => __( 'All Teams' ), 'parent_item' => __( 'Parent Team' ), 'parent_item_colon' => __( 'Parent Team:' ), 'edit_item' => __( 'Edit Team' ), 'update_item' => __( 'Update Team' ), 'add_new_item' => __( 'Add New Team' ), 'new_item_name' => __( 'New Team Name' ), 'menu_name' => __( 'Team' ), ); register_taxonomy( 'leagues', 'players', array( 'hierarchical' => true, 'labels' => $labels, 'query_var' => true, 'rewrite' => array('slug' => 'leagues') ) ); } add_action( 'init', 'player_taxonomy' ); add_action( 'init', 'players' ); function players() { register_post_type( 'players', array( 'labels' => array( 'name' => __( 'Players' ), 'singular_name' => __( 'Player' ), 'add_new' => __( 'Add New' ), 'add_new_item' => __( 'Add New Player' ), 'edit' => __( 'Edit' ), 'edit_item' => __( 'Edit Player' ), 'new_item' => __( 'New Player' ), 'view' => __( 'View Players' ), 'view_item' => __( 'View Player' ), 'search_items' => __( 'Search Players' ), 'not_found' => __( 'No Players found' ), 'not_found_in_trash' => __( 'No Players found in Trash' ), 'parent' => __( 'Players' ), ), 'public' => true, 'show_ui' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'supports' => array('title'/*,'editor','page-attributes','custom-fields','thumbnail','excerpt','comments'*/), 'show_ui' => true, 'rewrite' => array( 'slug' => 'players', 'with_front' => false ), 'has_archive' => 'players', 'taxonomies' => array('leagues') ) ); } |
1 2 3 4 5 | $args = array( 'post_type' => 'product', 'posts_per_page' => 10 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); the_title(); echo ' |
1 2 | ';
endwhile; |
http://themergency.com/generators/wordpress-custom-post-types/
http://wordpress.org/extend/plugins/custom-post-type-ui/
http://codex.wordpress.org/Child_Themes
What is a child theme anyway?
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.
With a basic understanding of PHP, WordPress Templates, and the WordPress Plugin API, you can make the child theme extend virtually every aspect of a parent theme, and again, without actually changing the parent theme files.
So what goes in a Child Theme?
A child theme resides in its own directory in wp-content/themes. The scheme below shows the location of a child theme along with its parent theme (Reverie) in a typical WordPress directory structure:
This directory can contain as little as a style.css file, and as much as any full-fledged WordPress theme contains:
What goes in the style.css file?
/*
Theme Name: My Reverie Child Theme
Theme URI:
Description: My Child theme description
Author: Hank Pantier
Author URI:
Template: reverie-master
Version: 1.0
*/ |
But I don’t want to miss out on the base theme styling…
@import url("../reverie-master/style.css"); |
So the whole style.css file should look like…
/* Theme Name: My Reverie Child Theme Theme URI: Description: My Child theme description Author: Hank Pantier Author URI: Template: reverie-master Version: 1.0 */ @import url("../reverie-master/style.css"); |
I like to start my child themes with a few more files and folders.
if (!is_admin()) add_action("wp_enqueue_scripts", "hank_jquery_enqueue", 11); function hank_jquery_enqueue() { wp_deregister_script('jquery'); wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://code.jquery.com/jquery-1.9.1.min.js", false, null); wp_enqueue_script('jquery'); wp_register_script( 'hank-js', get_stylesheet_directory_uri() . '/js/app.js', array( 'jquery' ), '', true ); wp_enqueue_script( 'hank-js' ); } function hank_css_style(){ // normalize stylesheet wp_register_style( 'hank-stylesheet', get_stylesheet_directory_uri() . '/css/app.css', array(), '' ); wp_enqueue_style( 'hank-stylesheet' ); } add_action( 'wp_enqueue_scripts', 'hank_css_style' ); |
NOTE: get_stylesheet_directory_uri() vs get_template_directory_uri()
wp_deregister_script – http://codex.wordpress.org/Function_Reference/wp_deregister_script
wp_register_script – http://codex.wordpress.org/Function_Reference/wp_register_script
wp_enqueue_script – http://codex.wordpress.org/Function_Reference/wp_enqueue_script
wp_register_style – http://codex.wordpress.org/Function_Reference/wp_register_style
wp_enqueue_style – http://codex.wordpress.org/Function_Reference/wp_enqueue_style
CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.
A style sheet is a file that describes how an HTML file should look. That’s it!
Ways to Use CSS
Ways to Include External Style Sheets
<link href="mystyle.css" rel="stylesheet" type="text/css" /> |
/* import stylesheets and hide from ie/mac \*/ @import url("reset.css"); @import url("master.css"); @import url("enriched.css"); @import url("ie.css"); /* end import/hide */ |
basic syntax
selector { property: value } |
Example:
body { background-color: red; } |
classes, id’s, divs and spans
descendant selectors:
div div p {} |
child selector:
div > p {} |
adjacent sibling selector:
p + p { font-size: smaller; } /* Selects all paragraphs that follow another paragraph */ #title + ul { margin-top: 0; } /* Selects an unordered list that directly follows the element with ID title */ |
universal selector:
ul * {padding:0px; margin:0px} |
group selector
p, strong, h2 {font-weight:bold} |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title></title>
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen,projection" />
<link rel="index" title="" href="" />
<!--[if lt IE 9 ]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
body {
color: #222;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}
#content-wrapper {
width: 960px;
padding: 0;
margin: 0 auto;
border: 2px solid black;
}
#content-wrapper #left {
width: 25%;
background: #E0E0E0;
float: left;
}
#content-wrapper #content {
width: 45%;
float: left;
padding: 0 2%;
border: 1px solid red;
border-top: 0;
}
#content-wrapper #right {
width: 25%;
background: #000;
color: #FFF;
float: right;
}
#content p,
#content li,
#content a {
color: green;
}
ul#last {
list-style: none;
}
ul#last li { float: left; }
</style>
</head>
<body class="" lang="en-US">
<header id="primary-header">
<nav id="primary-navigation">
<ul>
<li><a href="" title="">list <span>one</span></a></li>
<li><a href="" title="">list <span>two</span></a></li>
</ul>
</nav>
</header>
<div id="content-wrapper">
<aside id="left">
<nav id="contextual-navigation">
<ul>
<li><a href="" title="">another list</a></li>
<li><a href="" title="">another list</a></li>
</ul>
</nav>
</aside>
<section id="content">
<p>content area</p>
<p>content area</p>
<p class="alternate">content area</p>
<p>content area</p>
<p>content area</p>
<p>content area</p>
<p>content area</p>
<p class="end">content area</p>
<div class="big">
<div>
<a href="">first link</a>
</div>
</div>
<div>
<div class="big">
<a href="">second link</a>
</div>
</div>
<div>
<div>
<a href="">third link</a>
</div>
</div>
<ul>
<li class="alternate">1st list item 1</li>
<li>1st list item 2</li>
<li class="end">1st list item 3</li>
</ul>
<ul id="last">
<li>2nd list item 1</li>
<li>2nd list item 2</li>
<li class="end alternate">2nd list item 3</li>
</ul>
</section>
<aside id="right">
<p>Right Side content area</p>
</aside>
<br clear="both" />
</div>
<footer>
footer
</footer>
</body>
</html> |
Basic stuff…
http://www.cssbasics.com/
http://en.support.wordpress.com/custom-design/css-basics/
Advanced stuff…
http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
and all kinds of other misc stuff…
So we left off last class with creating some sidebars…two to be specific…
with the “register_sidebars” function. http://codex.wordpress.org/Function_Reference/register_sidebar
Here’s one way
if ( function_exists('register_sidebar') ){ register_sidebar(array( 'name' =>'Homepage Main Col Feature', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '<img src="'.$template_path.'/img/home/feature_bottom.gif" width="940" height="10" alt="" class="bottom" /></div></div>', 'before_title' => '<h1 style="color:#fff;padding-bottom:20px;">', 'after_title' => '</h1><div class="hr"><hr /></div><div class="feature_text">', )); register_sidebar(array( 'name' =>'Footer Contact & Links', 'before_widget' => '<div id="%1$s" class="widget footerinfo %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>', )); } |
But it’s kind of clunky. Here’s a much better way, let’s dissect this one.
// create widget areas: sidebar, footer $sidebars = array('Sidebar', 'Footer'); foreach ($sidebars as $sidebar) { register_sidebar(array('name'=> $sidebar, 'before_widget' => '<article id="%1$s" class="row widget %2$s"><div class="sidebar-section twelve columns">', 'after_widget' => '</div></article>', 'before_title' => '<h6><strong>', 'after_title' => '</strong></h6>' )); } |
OK… so now we’ve made some sidebars, how the hell do I show them on the front end of the site???
<ul id="sidebar"> <?php if ( ! dynamic_sidebar() ) : ?> <li>{static sidebar item 1}</li> <li>{static sidebar item 2}</li> <?php endif; ?> </ul> |
OK… but what if I want to use different sidebars on different pages or templates?
<ul id="sidebar"> <?php dynamic_sidebar( 'right-sidebar' ); ?> </ul> |
OK… so what would that file be called???
sidebar-right-sidebar.php |
Yep..
headers and footers too…
<?php get_header("page"); ?> <?php get_footer("page"); ?> |
And… these files would be called???
header-page.php
footer-page.php
Registering a menu – as of WordPress 3.0
function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); |
Adding a menu to your theme
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> |
http://codex.wordpress.org/Navigation_Menus
What are they?
Plugins are tools to extend the functionality of WordPress.
http://codex.wordpress.org/Plugins
Where can I find some of these?
http://wordpress.org/extend/plugins/browse/popular/
Some of my go to’s
Advanced Custom Fields
Easy Content Types
Google Analytics for WordPress
Gravity Forms
NextGEN Gallery
Per Page Sidebars
Regenerate Thumbnails
WP Super Cache
WordPress SEO
<?php echo get_template_directory_uri(); ?> |
<?php /* Start loop */ ?> <?php while (have_posts()) : the_post(); ?> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <?php the_content(); ?> <?php endwhile; /* End the loop */ ?> |
<?php echo "testing"; ?> |
add_theme_support('post-thumbnails'); // set_post_thumbnail_size(150, 150, false); // Add post formarts supports. http://codex.wordpress.org/Post_Formats add_theme_support('post-formats', array('aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat')); |
I guess you weren’t bored to death last week – whew!
Here are the files that we’ll be looking at tonight
HTML/PHP
CSS
JavaScript
A theme is a group of files that define the look and feel of your site. Themes are comprised of template files and can also contain images, scripting, css, javascript and more.
Templates
http://codex.wordpress.org/Stepping_Into_Templates
Template files are the building blocks of your WordPress site.
At the very minimum, a WordPress Theme consists of two template files:
style.css
index.php
The index.php template file is very flexible. It can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and any other page created in WordPress.
HEADER
CONTENT
FOOTER
footer.php
header.php
sidebar.php
1 2 3 | <!--?php get_sidebar(); ?--> <!--?php get_footer(); ?--> |
More typical / More Complex Structure
HEADER
CONTENT
SIDEBAR
FOOTER
1 | <!--?php get_sidebar(); ?--> |
http://codex.wordpress.org/Theme_Development
http://codex.wordpress.org/Templates
1 2 3 4 5 | <!--?php if (have_posts()) : ?--> <!--?php while (have_posts()) : the_post(); ?--> <!-- do stuff ... --> <!--?php endwhile; ?--> <!--?php endif; ?--> |
http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/The_Loop_in_Action
http://wp.tutsplus.com/tutorials/theme-development/a-beginners-guide-to-the-wordpress-loop/
http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm
http://codex.wordpress.org/Theme_Development
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
License:
License URI:
General comments (optional).
*/ |
wordpress generated classes
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Template_Hierarchy
Custom Page Templates
1 | <!--?php /* Template Name: Snarfer */ ?--> |
http://codex.wordpress.org/Theme_Development#Functions_File
Adding Featured Image support
1 | add_theme_support( 'post-thumbnails' ); |
Recent Comments