How to Customize Genesis WordPress Theme

How to Customize Genesis WordPress Theme

Genesis is a premium WordPress theme framework which provides search engine optimized and secure foundation for your WordPress blog. Advantage of premium theme is that you get support. For each Genesis child theme there is forum where you can ask your doubts, code snippets for modifying Genesis theme, whatever you want! This is the main reason behind many bloggers choose Genesis theme for their WordPress blog. In this article, we will share with you a way by which you can customize various fields in Genesis child themes. Modifying Genesis child theme is relatively simple.

Customize Genesis WordPress Theme

Note: To modify Genesis theme you have to modify mainly two files – style.css and functions.php. You can modify these files through WordPress dashboard -> Appearance -> Editor.

#1 How to Add Author Box to End of Posts

You can add author box at the end of each post without touching single line code. Under WordPress Dashboard -> Users -> Your Profile -> Genesis User Settings. Check on the box “Enable Author Box on this User’s Posts”.
But if your blog is a multi-author site then instead of editing each user profile you can use following code to show author box at the end of each post. Add following code in functions.php.

/** Add author box to end of posts **/
function abr_author_box () {
  $html = '<div class="author-box">';
  $html .=  get_avatar(get_the_author_meta('user_email'), 75); 
  $html .= '<strong>About <a href="'.get_author_posts_url(get_the_author_meta( 'ID' )).'">'.get_the_author_meta('user_firstname').' '.get_the_author_meta('user_lastname').'</a></strong><br />';
  $html .= wpautop(get_the_author_meta('description'));
  $html .= '</div>';
  echo $html;
}
add_action ( 'genesis_before_comments', 'abr_author_box', 10, 1);

Above code will add author box below each post as shown in the figure below:

Author Box

SEE ALSO: How to Add a Newsletter Signup Box After Your Post in Genesis Framework.

#2 How to Display Author’s Social Media Links on the Profile Page

To add author’s Twitter, Google+, Facebook, LinkedIn profile links on the author profile page first you have create author.php in your child theme folder and add following code into it:

<?php
/**
 *
 * Author template.
 *
 */
 
add_action( 'genesis_before_loop', 'tw_custom_auth_info' );
 
function tw_custom_auth_info() {
 
    if (is_author()) {
        $curauth = (get_query_var('author_name')) ? get_user_by('slug', get_query_var('author_name')) : get_userdata(get_query_var('author'));?>
        <div class="author-box"><?php echo get_avatar( $curauth->ID, $size = '76');?>
        <h1><?php echo $curauth->display_name;?></h1>
        <p>
        <?php
         if($curauth->user_description<>''): echo $curauth->user_description;
         else: _e("This user hasn't shared any biographical information","nomadic");
         endif;
        ?>
        </p>
        <br />
        <?php
          if(($curauth->user_url<>'http://') && ($curauth->user_url<>'')) echo '<p class="im www">'.__('Homepage:','nomadic').' <a href="'.$curauth->user_url.'">'.$curauth->user_url.'</a></p>';
          if($curauth->yim<>'') echo '<p class="im yahoo">'.__('Yahoo Messenger:','nomadic').' <a href="ymsgr:sendIM?'.$curauth->yim.'">'.$curauth->yim.'</a></p>';
          if($curauth->jabber<>'') echo '<p class="im gtalk">'.__('Jabber/GTalk:','nomadic').' <a href="gtalk:chat?jid='.$curauth->jabber.'">'.$curauth->jabber.'</a></p>';
          if($curauth->aim<>'') echo '<p class="im aim">'.__('AIM:','nomadic').' <a href="aim:goIM?screenname='.$curauth->aim.'">'.$curauth->aim.'</a></p>';
        ?>

        <ul><?php
 
        $google_profile = get_the_author_meta( 'google_profile', $curauth->ID );
        $facebook_id = get_the_author_meta( 'facebook_id', $curauth->ID );
        $twitter_id = get_the_author_meta( 'twitter_id', $curauth->ID );
        $linkedin_id = get_the_author_meta( 'linkedin_id', $curauth->ID );
 
        /* Create Google Profile and Other Links */
        
        if ( $google_profile || $facebook_id || $twitter_id || $linkedin_id) {
            ?><br /><p>Find me on:</p><?php
        }

        if ( $google_profile ) {
            ?><li><?php echo '<a href="' . $google_profile . '">Google Profile';?></li><?php
        }
        if ( $facebook_id ) {
            ?><li class="social_profile_facebook"><?php echo '<a href=http://www.facebook.com/' . $facebook_id . '>Facebook';?></li><?php
        }
        if ( $twitter_id ) {
            ?><li><?php echo '<a href=http://twitter.com/intent/user?screen_name=' . $twitter_id . '>Twitter';?></li><?php
        }
        if ( $linkedin_id ) {
            ?><li><?php echo '<a href=http://www.linkedin.com/in/' . $linkedin_id . '>LinkedIn';?></li><?php
        }
        ?></ul></div><h2 style="margin: 0 0 40px; overflow: hidden; padding: 10px 0;"><?php printf(__('Posts by %s', 'nomadic'), $curauth->display_name); ?></h2><?php
    }
}
 
genesis(); // <- everything important: make sure to include this.
?>

Then add following code in functions.php.

/** Add Custom Contact Profile Fields **/ 
function add_custom_contact_profilefields( $contactmethods ) {
    $contactmethods['google_profile'] = 'Google Profile URL';
    $contactmethods['facebook_id'] = 'Facebook ID';
    $contactmethods['twitter_id'] = 'Twitter UserName';
    $contactmethods['linkedin_id'] = 'LinkedIn UserName';
    return $contactmethods;
}
add_filter('user_contactmethods','add_custom_contact_profilefields',10,1);

Then Under Users -> Your Profile will look like this:

Author Settings

Add your information there and you have done it. Your author profile will look like this:

Author Profile

#3 How to Add a Comment Policy Box Before Comment Form

Many people want to add comment policy before comment form, to display comment policy add following code in functions.php

/** Add a comment policy box */
add_action( 'genesis_before_comment_form', 'single_post_comment_policy' );
function single_post_comment_policy() {
    if ( is_single() && !is_user_logged_in() && comments_open() ) {
    ?>
    <div class="comment-policy-box">
        <p class="comment-policy"><small><h4>Comment Policy:</h4> Your words are your own, so be nice and helpful if you can. Please, only use your <strong>real name</strong>, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.</small></p>
    </div>
    <?php
    }
}

Output:

Comment Policy

#4 Edit Comment Form

Following code will modify your comment form title and will add some text below it. Change the text as per your need. Add following code in functions.php.

/** Edit comments form text **/
function modified_comment_form_args($args) {
    $args['title_reply'] = 'Tell us what you\'re thinking...';
    $args['comment_notes_before'] = ' <p class="comment-policy">All comments are moderated.</p>
    <p class="required"><small>* Denotes required field.</small></p>';
    $args['comment_field'] = '<p class="comment-form-comment">' .
    '<textarea id="comment" name="comment" cols="45" rows="8" tabindex="4" aria-required="true"></textarea>' .
    '</p><!-- #form-section-comment .form-section -->';
     return $args;
    }
    add_filter('genesis_comment_form_args', 'modified_comment_form_args');

Output:
Modified Comment Form

#5 Display Previous and Next Links After Comment Form

For better navigation you must add previous post and next post links, so user can easily switch in between posts. Also it’ll help to reduce bounce rate. To display previous and next post links add following code in functions.php

/** Previous and Next Links **/
add_action('genesis_after_comment_form', 'custom_post_nav');
function custom_post_nav(){?>
    <div style="font-size:13px; padding:2px;">
           <?php previous_post_link('<b>Previous Post: %link') ?><br />
           <?php next_post_link('<b>Next Post: %link') ?>
     </div>
<?php }

Output:
Previous and Next Links

#6 How To Add Or Remove Navigation Menu

If you want to move your Primary Navigation Menu after your child theme header then add following code in functions.php

/** Moving Your Primary Navigation after Header **/
add_action('genesis_after_header', 'genesis_do_nav');
remove_action('genesis_before_header', 'genesis_do_nav');

If you want to move your Primary Navigation Menu before your child theme header then add following code in functions.php

/** Moving Your Primary Navigation before Header **/
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

If you want to move Secondary Navigation Menu below your child theme header then add following code in functions.php

/** Moving Your Secondary Navigation After Header **/
Remove_action('genesis_after_header','genesis_do_subnav');
Add_action('genesis_before_header','genesis_do_subnav');

#7 How to Change “Read More…” text to “Continue Reading…”

Many people want to change default “Read More…” text to different text like “More…”, “Continue…”, “Continue Reading…”, etc. I always prefer “[Continue Reading …]” text. Also we can add styles to this text so it look better. Add following in functions.php to accomplish this.

/** Read More changed to Continue Reading... **/
add_filter( 'excerpt_more', 'child_read_more_link' );
add_filter( 'get_the_content_more_link', 'child_read_more_link' );
add_filter( 'the_content_more_link', 'child_read_more_link' );
function child_read_more_link() {
 return '&#x2026; <a class="more-link" href="' . get_permalink() . '" rel="nofollow">Continue Reading &#x2026;</a>';}

Then add following code in style.css.

/** Customization for Read More Link... **/
.more-link {
  font-size: 12px;
  font-weight: bold;
  float: right;
  margin: 4px 0;
  padding: 1px 6px;
  text-transform: none;
  border-radius:4px;
  background-color:#DDDDDD;
  border:0;font-family:Arial, sans-serif;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -moz-box-shadow:0 1px 1px #AAAAAA;
  -webkit-box-shadow:0 1px 1px #AAAAAA;
}

.entry-content a {
   text-decoration: none;
}

.entry-content a:hover {
   text-decoration: underline;
}

Now your “Continue Reading” button will look more professional, more stylish.

Continue Reading

#8 Add Support for Custom Background

If you want custom background then add following code in functions.php.

/** Add support for Custom Background **/
add_custom_background();

#9 Add Support for Custom Header

If you want custom background then add following code in functions.php.

/** Add support for Custom Header **/
add_theme_support( 'genesis-custom-header', array( 'width' => 920, 'height' => 150, 'textcolor' => 'ffffff', 'admin_header_callback' => 'nomadic_admin_style' ) );

Don’t forget to change child theme name, here e.g. we’ve used “nomadic” as a child theme name. You can adjust width, height and textcolor values. Adjust them according to your need.

#10 Remove or Change Title and Description

If you want to remove Title and Description then add following code in functions.php. This is useful when you decide to use site logo instead of text for site title.

/** Remove Title and Description **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

Add following code in functions.php to add custom site title.

/** Remove default site title and add custom site title **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
function custom_site_title() { 
     echo '<h1 id="title">Tips and Tricks</h1>';
}
add_action( 'genesis_site_title', 'custom_site_title' );

#11 Remove Post Title

Add following code in functions.php to post title.

/** Remove post titles **/
remove_action( 'genesis_post_title','genesis_do_post_title' );

#12 How to Modify Footer Text

If you want to remove default footer text and want to add your text then add following code in functions.php.

/** Customize the entire footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'child_do_footer' );
function child_do_footer() {
    ?>
    <p><!-- Your Custom Text OR Code --></p>
    <?php
}

#13 Customize the Genesis Comment Button Text

If you want to change the “Post Comment” text in comment form of your website then add following code functions.php. Following code will change “Post Comment” text to “Submit Comment”.

function change_comment_form_submit_button_text( $defaults ) {
    $defaults['label_submit'] = 'Submit Comment';
    return $defaults;
}
add_filter( 'comment_form_defaults', 'change_comment_form_submit_button_text' );

#14 Modify Size of Comments Gravatar

If you want to modify size of Gravatar in comments then add following code functions.php. Change 65 number according to your need.

function child_comment_list_args( $args ) {
return array( 'type' => 'comment', 'avatar_size' => 65, 'callback' => 'genesis_comment_callback' );
}
add_filter( 'genesis_comment_list_args', 'child_comment_list_args' );

If you have any questions, then please feel free to ask in the comments below. Also don’t forget to share this article on Twitter, Google+ and on Facebook. We truly appreciate your support.

Comments

  1. says

    I tried to add the code in #1, I got this: Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in /home/athena/public_html/thelifestyleavenue/wp-content/themes/greetings/functions.php on line 569 :(

    • says

      In your site’s WP dashboard -< Appearance -< Editor.

      Click on the style.css from a right sidebar. And search this code:

      .entry-title {
          font-family: 'Neuton', sans-serif;
      

      Change the fonts as per your choice. Hope this helps.

      Cheers,
      Rajesh

  2. says

    Hi Rajesh,

    Thanks for this amazing post, but I was unable to find what I needed. Can you please tell me a way by which I can have single column excerpt posts with a featured image on the Home Page itself. I couldn’t find a way to do that.

 Comment Policy

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

CommentLuv badge