image

[Infographic] WPBeginner Upgrade WordPress

WPBeginner Upgrade WordPress

WPBeginner Upgrade WordPress Click for Larger Image

post

How to Create a Widgetized Area on a Page Templates in Genesis?

Previously, you would check to see if the dynamic sidebar was active and then you would display the dynamic sidebar. Or, maybe you call the dynamic sidebar and include some default information if the sidebar was not active.

Genesis has now streamlined this for you. While version 1 is not 100% perfect, in Genesis 1.9 expect a minor improvement with the new genesis_widget_area() function. In this brief tutorial, I will walk through a home template and a portfolio widgetized template.

Home

So instead of something like this on a home page (home.php):

if ( is_active_sidebar( 'home' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-right' ) ) {

	dynamic_sidebar( 'home' );

	if ( is_active_sidebar( 'home-left' ) ) {
		echo '</pre>
<div id="homepage-left">';
 dynamic_sidebar( 'home-left' );
 echo '</div>
<pre>
<!-- end #homepage-left -->';
	}

	if ( is_active_sidebar( 'home-right' ) ) {
		echo '</pre>
<div id="homepage-right">';
 dynamic_sidebar( 'home-right' );
 echo '</div>
<pre>
<!-- end #homepage-right -->';
	}

}
else {
	genesis_standard_loop();
}

You can now have something as simple as this:


if ( ! genesis_widget_area( 'home', array( 'before' => '<div class="home-slider widget-area">' ) ) && ! genesis_widget_area( 'home-left' ) && ! genesis_widget_area( 'home-right' ) )
	genesis_standard_loop();

Or, if you prefer (without the loop default):

genesis_widget_area( 'home', array( 'before' => '<div class="home widget-area">', ) );
genesis_widget_area( 'home-left', array( 'before' => '<div class="home-left widget-area">', ) );
genesis_widget_area( 'home-right', array( 'before' => '<div class="home-right widget-area">', ) );

Regardless, you still need to register the widget/sidebar areas in functions.php.

// Register Sidebars
genesis_register_sidebar(
	array(
		'id' 			=> 'home',
		'name' 			=> __( 'Home', 'child' ),
		'description' 	=> __( 'This is the home main section.', 'child' ),
	)
);

genesis_register_sidebar(
	array(
		'id' 			=> 'home-left',
		'name' 			=> __( 'Home Left', 'child' ),
		'description' 	=> __( 'This is the home left section.', 'child' ),
	)
);

genesis_register_sidebar(
	array(
		'id' 			=> 'home-right',
		'name' 			=> __( 'Home Right', 'child' ),
		'description' 	=> __( 'This is the home right section.', 'child' ),
	)
);

Widgetized Page Template: Portfolio

You could also create a portfolio page template this way as well. First, create a file named page-portfolio.php (NOTE: A file named this way will automatically become the page template of any page named Portfolio, so if you want to avoid this [though against WordPress Coding Standards], name the file page_portfolio.php). Then copy the following into it. This will go into your child theme folder along with home.php (if there is one), functions.php, and style.css.

/**
 * Template Name: Portfolio Template
 *
 * This file is responsible for generating a widgetized
 * portfolio page template forcing a full-width
 * layout, removes post info & post meta and adds portfolio class.
 *
 * @category     Child
 * @package      Templates
 * @author       Travis Smith <travis@wpsmith.net>
 * @copyright    Copyright (c) 2012, Travis Smith
 * @license      http://opensource.org/licenses/gpl-2.0.php GNU Public License
 * @since        1.0.0
 *
 */

//Remove Post Info / Meta
remove_action( 'genesis_before_post_content', 'genesis_post_info' );
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );  

//Forces pre-layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

add_filter( 'body_class', 'minfolio_add_portfolio_widgetized_body_class' );
/**
 * Add page specific body class
 *
 * @param $classes array Body Classes
 * @return $classes array Modified Body Classes
 */
function minfolio_add_portfolio_widgetized_body_class( $classes ) {
   $classes[] = 'portfolio-widgetized';
   return $classes;
}

// Remove default content / loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'minfolio_portfolio_widget' );
/**
 * Add the Portfolio widget area
 *
 * @uses genesis_widget_area() Conditionally displays a sidebar, wrapped in a div by default.
 */
function minfolio_portfolio_widget() {
	genesis_widget_area( 'portfolio', array( 'before' => '<div class="portfolio widget-area">', ) );
}

If you don’t want the portfolio widget area to be wrapped in a div you would use this instead:

genesis_widget_area( 'portfolio', array( 'before' => '', 'after' => '', ) );

Hopefully the commentation makes the code easy to follow. If you are wondering what all the @category, @package, @uses, etc. are, don’t worry, you are not the only ones. Funny thing is that Genesis didn’t start getting some of this type of documentation until Genesis 1.7 and 1.8 (primarily). For more information, please refer to Michael Fields’s Theme Documentation post. If you are a child theme developer, I highly encourage you to have your code vetted and validated with @GaryJ (Gary Jones). You can contact Gary via Twitter, the #genesiswp IRC channel (almost any time! though if he doesn’t answer leave the IRC open [if you can unlike me] until he does…he ALWAYS does), Facebook, or somewhere. You are guaranteed to learn something!

NOTE: Currently, the default ‘before’ argument is '<div class="widget-area">'. Hopefully in the next version of Genesis, this will change to something like this: '<div class="' . $id . ' widget-area">' to include the id automatically in the argument as that would be extremely helpful thus reducing the code for me to just genesis_widget_area( 'home' );

image

[Infographic] WPJedi WordPress Plugins 101

WPJedi WordPress Plugins

WPJedi WordPress Plugins Click for Larger Image

image

[Infographic] WPBeginner WordPress.com v. WordPress.org

WPBeginner WordPress.com v. WordPress.org

WPBeginner WordPress.com v. WordPress.org Click for Larger Image

image

[Infographic] Move to WordPress.org (self-hosted)?

Move to WordPress.org (self-hosted)?

Move to WordPress.org (self-hosted)? Click for Larger Image

post

Genesis March Madness: College Basketball Pick’em Tourney

So, just a LATE shot in the dark and not sure if anyone will sign up, I created a March Madness Tourney Bracket on Yahoo! (yes, I am sorry that Google hasn’t created such apps yet…).

Anyways, here’s the Bracket SCORING:
Yahoo! Tourney Pick'em

  • Round of 64: 1pt
  • Round of 32: 2pts
  • Sweet 16/Reg. Semis: 4pts
  • Elite 8/Reg. Finals: 6pts
  • Final Four/Semifinals: 10pts
  • Final/Championship: 16pts

Bonus Points = Seed differiential for UPSETS!! Seed diference multipliers put heavy emphasis on big upsets in early rounds.

Signup here
Password: genesiswp

post

Get Genesis Comments in a Shortcode

Recently, I corresponded with someone who need to port the Genesis comments into a shortcode for a custom post type template (I’m assuming). However, doing it seemed challenging and a lot of hack work, but he reminded me of the genesis template part, which made it very doable.

Since I thought this was fairly novel idea, I thought I’d post about here.

remove_action( 'genesis_after_post', 'genesis_get_comments_template' );

function ts_genesis_comments_shortcode() {
	ob_start();
	genesis_get_comments_template();
	$tsComments = ob_get_clean();
	return $tsComments;
}
add_shortcode ('ts-genesis-comments', 'ts_genesis_comments_shortcode');

First we need to remove the comments template via remove_action( 'genesis_after_post', 'genesis_get_comments_template' );. Then we can get the comments via output buffering (ob_start() and ob_get_clean()).

image

[Infographic] Pagely WordPress Top40

Pagely WordPress Top40

Pagely WordPress Top40 Click for Larger Image

post

How to Move the Comment Form Above the Comments List in Genesis

This is extremely easy and only involves only a few lines of code that can go into functions.php.

add_action( 'genesis_before_comments' , 'wps_post_type_check' );
function wps_post_type_check () {
	if ( is_single() ) {
		if ( have_comments() ) {
			remove_action( 'genesis_comment_form', 'genesis_do_comment_form' );
			add_action( 'genesis_list_comments', 'genesis_do_comment_form' , 5 );
		}
	}
}

If you do not check for comments, then simply removing the form and adding it at the top of the list will remove the form altogether on single pages/posts that have no comments. We do this with a simple function, have_comments().

post

How to Embed Videos at Different Sizes in Genesis (and other Themes)

Need to embed videos but hate the limitation that you cannot have the same post appear with the same video on different sizes? WordPress provides a little known filter (embed_defaults) that will enable you to easily change the height and width of an embeded object.


Currently, WordPress allows oEmbed by default, and it supports the following sites:

For any of these videos, you can support multiple widths so that the video is “full” content width. For example, check out these examples:

  • Video on my site on full-width
  • Video on my site on sidebar-content-sidebar
  • Video on my site on sidebar-content

So how did I do this? In HTML mode, I inserted the url

http://www.youtube.com/watch?v=R2a8TRSgzZY

and clicked publish. Then in my functions.php file, I have this code:

*NOTE: In Genesis 1.8, this function will break the blog page template due to a bug that will hopefully be fixed in the next version.

In this function, we are filtering a WordPress function wp_embed_defaults() that creates default array of embed parameters when do_shortcode is used (which is applied to the_content).

For other themes, the code would be modified to use the standard WordPress conditionals.