Loading...
April 28, 2013#

BDW WordPress Class Canceled on Monday

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.

April 15, 2013#

WordPress Class

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

April 8, 2013#

WordPress Conditional Tags

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

Common Conditional Tags

General

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?

Categories

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.

Custom Post Types

get_post_type()
Returns the registered post type of the current post.

Preview

is_preview()
When a single post being displayed is viewed in Draft mode.

Other Conditional Tags

  • Tags
  • Authors
  • Taxonomies
  • Archive
  • Search
  • 404

Examples

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();
}
April 8, 2013#

Custom Post Types & Templates to Display Them

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.

The Listing Page

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;

The Single Item Page

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>";
April 1, 2013#

Custom WordPress Post Types

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

What the hell is a custom post type anyway?

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

  • Real estate listings.
  • Event calendar (I know a lot of folks are interested in this).
  • Movie Database
  • Book Database
  • A forum without a lot of integration problems.
  • A ticket system like the WordPress Trac.
  • Design gallery/showcase.
  • Teams

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' =&gt; array(
				'name' =&gt; __( 'Products' ),
				'singular_name' =&gt; __( 'Product' )
			),
		'public' =&gt; true,
		'has_archive' =&gt; true,
		)
	);
}

Labels

The above example uses 2 labels – but many more are available.

  • name: The plural form of the name of your post type.
  • singular_name: The singular form of the name of your post type.
  • add_new: The menu item for adding a new post.
  • add_new_item: The header shown when creating a new post.
  • edit: The menu item for editing posts.
  • edit_item: The header shown when editing a post.
  • new_item: Shown in the favorites menu in the admin header.
  • view: Used as text in a link to view the post.
  • view_item: Shown alongside the permalink on the edit post screen.
  • search_items: Button text for the search box on the edit posts screen.
  • not_found: Text to display when no posts are found through search in the admin.
  • not_found_in_trash: Text to display when no posts are in the trash.
  • parent: Used as a label for a parent post on the edit posts screen. Only useful for hierarchical post types.

with full arguments it’d look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'labels' =&gt; array(
	'name' =&gt; __( 'Super Dupers' ),
	'singular_name' =&gt; __( 'Super Duper' ),
	'add_new' =&gt; __( 'Add New' ),
	'add_new_item' =&gt; __( 'Add New Super Duper' ),
	'edit' =&gt; __( 'Edit' ),
	'edit_item' =&gt; __( 'Edit Super Duper' ),
	'new_item' =&gt; __( 'New Super Duper' ),
	'view' =&gt; __( 'View Super Duper' ),
	'view_item' =&gt; __( 'View Super Duper' ),
	'search_items' =&gt; __( 'Search Super Dupers' ),
	'not_found' =&gt; __( 'No super dupers found' ),
	'not_found_in_trash' =&gt; __( 'No super dupers found in Trash' ),
	'parent' =&gt; __( '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:

  • show_ui: Whether to show the administration screens.
  • publicly_queryable: Whether queries for this post type can be performed from the front end.
  • exclude_from_search: Whether the posts should appear in search results.
1
2
3
4
'public' =&gt; true,
'show_ui' =&gt; true,
'publicly_queryable' =&gt; true,
'exclude_from_search' =&gt; 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' =&gt; 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' =&gt; 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' =&gt; 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' =&gt; 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:

  • title: Text input field to create a post title.
  • editor: Content input box for writing.
  • comments: Ability to turn comments on/off.
  • trackbacks: Ability to turn trackbacks and pingbacks on/off.
  • revisions: Allows revisions to be made of your post.
  • author: Displays a select box for changing the post author.
  • excerpt: A textarea for writing a custom excerpt.
  • thumbnail: The thumbnail (featured image in 3.0) uploading box.
  • custom-fields: Custom fields input area.
  • page-attributes: The attributes box shown for pages. This is important for hierarchical post types, so you can select the parent post.
1
'supports' =&gt; array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail' ),

Rewrite
The rewrite argument allows you to define the permalink structure

  • slug: The slug you’d like to prefix your posts with.
  • with_front: Whether your post type should use the front base from your permalink settings (for example, if you prefixed your structure with /blog or /archives).
1
'rewrite' =&gt; array( 'slug' =&gt; 'cool', 'with_front' =&gt; 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' =&gt; 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' =&gt; true,

Custom Taxonomies

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' =&gt; _x( 'Team', 'taxonomy general name' ),
	    'singular_name' =&gt; _x( 'Team', 'taxonomy singular name' ),
	    'search_items' =&gt;  __( 'Search Teams' ),
	    'all_items' =&gt; __( 'All Teams' ),
	    'parent_item' =&gt; __( 'Parent Team' ),
	    'parent_item_colon' =&gt; __( 'Parent Team:' ),
	    'edit_item' =&gt; __( 'Edit Team' ), 
	    'update_item' =&gt; __( 'Update Team' ),
	    'add_new_item' =&gt; __( 'Add New Team' ),
	    'new_item_name' =&gt; __( 'New Team Name' ),
	    'menu_name' =&gt; __( 'Team' ),
	); 
 
   register_taxonomy(
	    'leagues',
	    'players',
	    array(
	        'hierarchical' =&gt; true,
	        'labels' =&gt; $labels,
	        'query_var' =&gt; true,
	        'rewrite' =&gt; array('slug' =&gt; 'leagues')
	    )
	);
}
add_action( 'init', 'player_taxonomy' );
 
add_action( 'init', 'players' );
function players() {
	register_post_type( 'players', array(
		'labels' =&gt; array(
			'name' =&gt; __( 'Players' ),
			'singular_name' =&gt; __( 'Player' ),
			'add_new' =&gt; __( 'Add New' ),
			'add_new_item' =&gt; __( 'Add New Player' ),
			'edit' =&gt; __( 'Edit' ),
			'edit_item' =&gt; __( 'Edit Player' ),
			'new_item' =&gt; __( 'New Player' ),
			'view' =&gt; __( 'View Players' ),
			'view_item' =&gt; __( 'View Player' ),
			'search_items' =&gt; __( 'Search Players' ),
			'not_found' =&gt; __( 'No Players found' ),
			'not_found_in_trash' =&gt; __( 'No Players found in Trash' ),
			'parent' =&gt; __( 'Players' ),
		),
		'public' =&gt; true,
		'show_ui' =&gt; true,
		'publicly_queryable' =&gt; true,
		'exclude_from_search' =&gt; false,
		'supports' =&gt; array('title'/*,'editor','page-attributes','custom-fields','thumbnail','excerpt','comments'*/),
		'show_ui' =&gt; true,
		'rewrite' =&gt; array(
			'slug' =&gt; 'players',
			'with_front' =&gt; false
			),
		'has_archive' =&gt; 'players',
		'taxonomies' =&gt; array('leagues')
	) );
 
}

How to Query Custom Post Types

1
2
3
4
5
$args = array( 'post_type' =&gt; 'product', 'posts_per_page' =&gt; 10 );
$loop = new WP_Query( $args );
while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();
	the_title();
	echo '
‘; the_content(); echo ‘
1
2
';
endwhile;

Useful Links

http://themergency.com/generators/wordpress-custom-post-types/
http://wordpress.org/extend/plugins/custom-post-type-ui/

March 25, 2013#

Child Themes + Custom Styling + Custom JQuery

Child Themes

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:

  • site_root (www) (sites)
    • wp-content
      • themes (directory where all themes are)
        • reverie-master (directory of our example parent theme, Reverie)
        • reverie-child (directory of our child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)

This directory can contain as little as a style.css file, and as much as any full-fledged WordPress theme contains:

  1. style.css (required)
  2. functions.php (optional)
  3. Template files (optional)
  4. Other files (optional)

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

What’s a Real World Child Theme Need?

I like to start my child themes with a few more files and folders.

  1. A CSS Folder – to keep all of my style sheet files in a nice orderly place
  2. A JS Folder – to keep all of my Javascript (JQuery) in a nice spot
  3. A functions.php file – so i can make all of this work.
  • site_root (www) (sites)
    • wp-content
      • themes (directory where all themes are)
        • reverie-master (directory of our example parent theme, Reverie)
        • reverie-child (directory of our child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)
          • functions.php (so i can change the functionality of my child theme)
          • screenshot.png (no need for this not to be pretty, folks)
          • css
            • app.css
          • js
            • app.js

Getting it to work…

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

reference links

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

March 18, 2013#

Back to Basics…

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

  • External style sheet
  • Internal style sheet
  • Inline style

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}

Example HTML Code

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

March 10, 2013#

Sidebars / Widgets / Menus…

Sidebars / Widgets / Menus…

and all kinds of other misc stuff…

So we left off last class with creating some sidebars…two to be specific…

How to add two sidebars

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

HMMM that’s kinda cool…will that work on any other files???

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

Well that’s a decent chunk to bite off – let’s try some of that

Menus

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

let’s give that a whirl too

Plugins…

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

Wrapping up / next week

Reverie
Foundation

March 4, 2013#

Grab This

<?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'));
February 18, 2013#

The WordPress Admin & Themes

Glad You’re Back

I guess you weren’t bored to death last week – whew!

A Tour of the WordPress Admin

  • Dashboard

Here are the files that we’ll be looking at tonight

Building Blocks

HTML/PHP

CSS

JavaScript

Now – Themes…

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.

Most basic structure

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

THE Loop

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/

LET’S CREATE A THEME…

http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm

THEME STYLESHEET

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

FUNCTIONS

http://codex.wordpress.org/Theme_Development#Functions_File

Adding Featured Image support

1
add_theme_support( 'post-thumbnails' );

http://codex.wordpress.org/Post_Thumbnails