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.
Looking for a team to do the work for you?
We are currently accepting new project
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;
}
Leave a Reply