Genesis Developer and Designer Code Snippets

Sometimes it helps to specify a particular category or your website when you are adding unique style to sections of your site. This code ads a specific identifier to any categorical post.

Genesis Child Theme Developer Tip #1:

We spend our days searching for Genesis child theme customizations and modifications while we design and develop our WordPress websites. Here’s a few we use often that may help you customize or modify your Genesis child themes!

Add archive category to body class of a WordPress page

File: functions.php
-------------------

/* Add Category Type To Body Class Of Single Article */

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
	if (is_single() ) {
		global $post;
		foreach((get_the_category($post->ID)) as $category) {
			// add category slug to the $classes array
			$classes[] = $category->category_nicename;
		}
	}
	// return the $classes array
	return $classes;
}

[JQuery] Genesis Child Theme Developer Tip #2:

If another class exists then add a class to the body of the page.

Add to global.js

File: global.js
---------------

jQuery(function( $ ){

	if($('.class-name').length !== 0)
{
  $('body').addClass('class-name-added-to-body');
}

});

[JQuery] Genesis Web Development Tip #3:

Fade WordPress elements out when the user scrolls down.

Make sure to add the .fade-on-scroll class to the WordPress elements you’d like to fade.

File: home.js
-------------

$(window).scroll(function() {
    $(".fade-on-scroll").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });
});

[Shortcode] Genesis Design and development Tip #4:

This shortcode creates a unique section with class

Use: [content-section class="quote"]'This is the quote'[/content-section]

File: functions.php
-------------------

//* Page Section with field for unique class.

function contentSection( $atts, $content = null ) {
$content = preg_replace('#^</p>|<p>$#', '', $content);
$a = shortcode_atts( array(
		'class' => 'Add Classes Here',

), $atts );
   return '<div class="full-block '."{$a['class']}".' "><div class="wrap">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('content-section', 'contentSection');

WordPress / Genesis Themes Tip #5

[Shortcode] Create your own clearline shortcode for your Genesis Child Theme

File: functions.php
-------------------

//* General Class Shortcode
function clearline_func() {
    return '<section class="clear-line"></section>';
}
add_shortcode( 'clear-line', 'clearline_func' );

File: style.css
---------------

/* Shortcodes */
.clear-line {
  border-bottom: 1px solid #ddd;
  clear: both;
  padding-top: 40px;
  margin-bottom: 40px;
	}

Genesis Child Theme Designer and Developer Tip #6

Here is how we integrate icomoon SVG icons into Genesis custom menus

File: Directions
----------------

- Create a project in Icomoon
- Upload .svg files
- select icons to use
- Generate Font
- Download
- Copy Fonts folder and selection.json file into theme folder
- Copy CSS into theme style.css (see .CSS below)
- Add <span class="icon-ww"></span> to custom menu Navigation Label


File: style.css
---------------

@font-face {
		font-family: 'icomoon';
		src:url('fonts/icomoon.eot?-7yf0ag');
		src:url('fonts/icomoon.eot?#iefix-7yf0ag') format('embedded-opentype'),
			url('fonts/icomoon.woff?-7yf0ag') format('woff'),
			url('fonts/icomoon.ttf?-7yf0ag') format('truetype'),
			url('fonts/icomoon.svg?-7yf0ag#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	[class^="icon-"], [class*=" icon-"] {
		font-family: 'icomoon';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-ww:before {
		content:"e601";
	}

	.icon-tk:before {
		content:"e600";
	}

	.icon-ww,
	.icon-tk{
		display: inline-block;
		line-height: 1;
	}

WordPress with Genesis Framework Development Tip #7:

Move primary genesis sidebar above content

File: functions.php
-------------------

remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
add_action( 'genesis_before_content', 'genesis_get_sidebar' );

Genesis Framework Child Theme Tip #8:

Define a default featured image / post thumbnail for archive in WordPress

File: function.php
------------------

/** Define a default post thumbnail */
add_filter('genesis_get_image', 'default_image_fallback', 10, 2);
function default_image_fallback($output, $args) {
    global $post;
    if( $output || $args['size'] == 'full' )
        return $output;

    $thumbnail = CHILD_URL.'/images/default.png';

    switch($args['format']) {

        case 'html' :
            return '<img src="'.$thumbnail.'" class="attachment-'. $args['size'] .'" alt="'. get_the_title($post->ID) .'" />';
            break;
        case 'url' :
            return $thumbnail;
            break;
       default :
           return $output;
            break;
    }
}

WordPress Designer and developer tip #9:

Add third menu above footer

File: functions.php
-------------------

//// Add third navigation menu

function register_additional_menu() { 
register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu' ));   
}

add_action( 'init', 'register_additional_menu' );
add_action( 'genesis_before_footer', 'add_third_nav_genesis' ); 
 
function add_third_nav_genesis() {
wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'third-menu' ) );
}

File: style.css
---------------

/* Third Navigation ---------------- */ 
.third-menu {
    text-align: center;
	clear: both;
	color: #222;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	width: 100%;
}

.third-menu .menu-item{
	display: inline-block;
	text-align: left;
}

.third-menu a{
	border: none;
	color: #222;
	display: block;
	padding: 25px 20px;
	position: relative;
}

.third-menu a:hover,
.third-menu .current-menu-item > a,
.third-menu .sub-menu .current-menu-item > a:hover{
	color: #e8554e;
}

Custom WordPress Development Tip #10:

Simple ad-block shortcode

File: functions.php
-------------------

// Add Custom Ad block Shortcode 
//[adblock1 title='Ad Title' description='Ad Description ' link='Ad Link' linkname='Ad Link CTA']
function adblock1_func( $atts ) {
    $a = shortcode_atts( array(
        'title' => 'Ad Title',
        'description' => 'Ad description',
        'link' => 'Ad link',
        'linkname' => 'Click here',
    ), $atts );

    return '<div class="adblock1">'.'<h2>'."{$a['title']}" . '</h2>'. '<p>'."{$a['description']}" .'</p>'.' <a class="button" href="' . "{$a['link']}" .'">'."{$a['linkname']}".'</a>'.'</div>';
}
add_shortcode( 'adblock1', 'adblock1_func' );

File: style.css
---------------

.adblock1{
    background: #ddd;
    padding: 10px 20px;
    margin-bottom: 20px;
    text-align: center;
}