अभी के समय मे लोग site की content से ज्यादा उसकी design पर focus करते हैं. हर ब्लॉगर चाहता है कि उसके site की design better हो और clean and responsive design हो तो इसके लिए बहुत सारे Template/themes को try करते हैं. In my case, मेने भी अपने site में काफी सारे themes को try किया है और अब में अपने इस ब्लॉग में Genesis Theme use कर रहा हूँ. अगर आप भी अपने ब्लॉग में Genesis use करते हो तो यह post आपके लिए helpful होगी. हम इसमे आपको कुछ functions.php code के बारे के बताएंगे जो customization and design मे आपकी help करेगी।

बहुत सारे नए WordPress user को Genesis theme के बारे में नही पता होता है. इसीलिए में सबसे पहले इसके बारे में थोड़ा बता देता हूँ कि Genesis framwork एक theme है और इसके बहुत सारे child themes available है. ज्यादा तर लोग इसके साथ child theme को भी use करते हैं. क्योकि बहुत सारे child themes हैं, जिसका design भी अलग अलग है और इससे वो अपने site को better design कर पाता है. Child theme को customize और design करने में भी आसानी होती है.

अगर आप इसे अपने site में use करना चाहते हैं तो में आपको बता दुँ की यह एक premium theme है और इसका price 5000 से 6000 तक है. यह responve theme है जो कि सभी तरह के Mobile, computer and other devices में fix हो जाते हैं. इस theme में slow load script (Javascript, CSS) का बहुत कम use हुआ है, जिससे यह बहुत fast loading होता है. इसकी design clean and clear है और इसे आप आसानी से customize करके design कर सकते हो.

आपको ये पता है कि अभी मेरा ब्लॉग Genesis thene पर ही run हो रही है. मेने आपको ये भी बता दिया है कि starting में मैने बहुत सारे themes को try किया था लेकिन finally मेने Genesis को choose किया। इसकी एक सबसे बड़ा fact बता देता हूँ कि Mostly, developers, designer अपने site में Genesis theme को choose करते हैं और इसका कारण ये है कि इस theme को अपने से customize करना बहुत easy है. जब में अपने site में genesis upload किया था तो मुझे coding की abc भी नही पता था और जब मैने धीरे धीरे इस theme को अपने से customize and design करता रहा तो अब मुझे HTML, CSS की थोड़ी बहुत जानकारी हो गयी है। मेरा इन सब से कहने का यही मतलब था कि जब आप Genesis theme को अपने से design and customize करते रहेंगे तो coding की जानकारी भी हो जाएगी।

Genesis theme को customize करने के लिए बहुत सारे plugins available है. यदि आपको coding की जानकारी नही है तो आप plugin के द्वारा genesis को design कर सकते हो. इस post में हम बिना plugin के Genesis theme customize करने के बारे में बताएंगे। Theme को आपने से customize करने और theme को plugin द्वारा design करने में बहुत बड़ा difference है. हम आपको इसका एक छोटा सा example देते हैं कि अगर आपको Genesis footer में custom link या text add करना है तो अगर आप plugin use करेंगे तो लगभग 1mb का होगा और आप बिना plugin करेंगे तो आपको theme के functions.php में only 8 line code add करना होगा।

मुझे कुछ दिन पहले किसी ने comment करके बताया था कि Genesis theme को customize कैसे करते हैं तो इसीलिए में इस post में आपको बताने जा रहा हूँ की Genesis theme को manually कैसे customise करते हैं।

How to Customize Genesis theme Manually (without plugin).

Post के End में Author Box कैसे Add करें?

आपने बहुत से sites में देखा होगा कि post के नीचे author box होता है. जिसमे post Author के बारे में बताया हुआ होता है. इससे readers को author से पहचान बढ़ती है. अगर आप अपने site में Genesis theme use करते हो तो आपको अपने theme की functions.php में एक code add करना होगा, उसके बाद आप अपने post के नीचे author box show करा सकते हो।

आप नीचे दिए गए code को अपने Child theme की fuctions.php में add कर दीजिए।

/** 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);

इस code को add करने के बाद आपके posts के नीचे Author box show होने लगेंगे. आप Dashboard » Users » Your Profile में जाकर About us की field में अपने बारे में लिखिए, वही आपके post के नीचे लिखा होगा।

Comment Form से पहले Comment Policy Box कैसे Add करें ―

आप अपने ब्लॉग में comment form से पहले Policy box add कर सकते हैं. इससे commentator ध्यान में रखकर ही comment करेगा. आप policy box में notice दिखा सकते हो. जैसे आप वहाँ ये लिख सकते हो कि Comment में Link mention नही करें, वरना comment approve नही हो पायेगा! इसी तरह आप बहुत कुछ लिख सकते हो। अगर आप इसे add करना चाहते हो तो आपको functions.php में code add करना होगा जो हम नीचे बता रहे हैं।

/** 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>These words showing on Policy Box.</small></p>
    </div>
    <?php
    }
}

Note: इस code में These words showing on Policy Box. के स्थान पर अपने policy के बारे में लिख सकते हो।

Edit Comment Form ―

अगर आप अपने ब्लॉग के comment form को ज्यादा better बनाना चाहते हो तो अब हम जो code बताएंगे, उससे आप Comment Form को customize कर सकते हो. अगर आप comment form को new look देना चाहते हो तो हम जो code नीचे बता रहे हैं, उसे आप अपने theme की functions.php में add कर सकते हो।

/** 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');

Result:

आप ऊपर बताये गए code में Tell us what you\’re thinking… के जगह अपनी भाषा हिंदी में भी कुछ अच्छा लिख सकते हो. अगर आप comment form को ज्यादा better look देना चाहते हो तो नीचे दिए गए CSS को अपने theme में add कर लो।

Post में Previous & Next Post Link कैसे Show करें।

आप बहुत सारे ब्लॉग में जब post पढ़ते होंगे तो वहाँ पर Previous and Next Post link show करा सकते हो. में भी अपने ब्लॉग पोस्ट में next & previous post के link को show कराता हूँ. इससे मेरे visitors को आसानी होती है. इससे pageviews और search ranking दोनों increase होती है. आप अपने ब्लॉग में भी इसे add कर सकते हो. आपको बस एक simple code अपने theme के functions.php में add करना होगा और उसके बाद अपने आप आपके ब्लॉग के सारे posts में next and previous post की link show होने लगेगी। आप नीचे दिए code को theme की functions.php में add करें।

/** Genesis Previous/Next Post Post Navigation */
add_action( 'genesis_before_comments', 'eo_prev_next_post_nav' );
function eo_prev_next_post_nav() {
	if ( is_single() ) {
		echo '<div class="prev-next-navigation">';
		previous_post_link( '<div class="previous">Previous article: %link</div>', '%title' );
		next_post_link( '<div class="next">Next article: %link</div>', '%title' );
		echo '</div><!-- prev-next-navigation by BloggingHindi.com -->';
	}
}

अब नीचे दिए CSS code को अपने ब्लॉग में add करें –

.next-prev-navigation .previous{width:50%;float:left;padding-right:10px;text-align:left}.next-prev-navigation .next{right:10px;width:50%;float:right;padding-left:10px;text-align:right}.next-prev-navigation .next p,.previous p{text-transform:uppercase;font-size:16px;margin:0}.next-prev-navigation,{background:#fff;border:1px solid #efefef;padding:2rem;margin-top:20px;overflow:hidden}

अब आप अपने ब्लॉग के किसी post को open करके देखें कि वहाँ पर पिछले और अगले post का link show हो रहा है या नही। अगर आप इसकी look को better बनाना चाहते हैं तो नीचे दिए CSS को अपने ब्लॉग में add करो।

Read More Button को बढ़िया Look कैसे देते हैं?

अब हम आपको बता रहे हैं कि Post Summary के नीचे दिखने वाले Read More button को अच्छे से design कैसे करते हैं या Read More को change करके Continue Reading…. या कुछ और कैसे show करें! अगर आपको Read More बटन को ज्यादा बेहतर बनाना है तो हम जो code बताएंगे आपके लिए helpful होगी। आप नीचे दिए code को theme की functions.php में add करो।

/** 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 '… <div style="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;"><a class="more-link" href="' . get_permalink() . '" rel="nofollow">Continue Reading …</a></div>';
}

अब इस code में आप Read More की जगह में कुछ भी लिख सकते हो. इसको add करने के बाद एक बार अपने ब्लॉग में visit करके देख लीजिए।

Remove or Change Title and Description:

अगर आप अपने site के heading में logo use करना चाहते हो तो आपको अपने site से Title and Description को remove करना चाहिए. क्योकि Logo रहने पर जब Title या Description show होता है तो इससे इसका look बेकार लगता है. अगर आप अपने Header से Title and Description को remove करना चाहते हो तो नीचे दिए code को theme की functions.php में add करो।

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

Footer Text को modify कैसे करें ―

जब new genesis child theme install करते हैं तो उसमें Footer में कुछ और ही show होता है. अगर आप अपने footer text को customize करना चाहते हो तो इसके लिए बस आपको simple code add करना होगा और उसमें कुछ changes करने होंगे. नीचे दिए code को functions.php में add करें।

/** Customize 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
}

इस code में <!– Your Custom Text OR Code –> के स्थान पर जो footer में दिखाना चाहते हो उसे add कर लीजिए। अगर आप footer में link show करना चाहते हो तो आपको HTML में link add करना होगा।

Genesis Comment Submit Button को Customize कैसे करें ―

अगर आप अपने ब्लॉग के Comment Submit बटन की text को change करना चाहते हो तो आप ये भी आसानी से कर सकते हो. अगर आप Comment Submit बटन की Text को change करेंगे तो इससे आपका site सबसे different होगा। इसके लिए आपको नीचे दिए गए code को अपने theme की functions.php में add करना होगा।

/* Change Comment Submit Button**/
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' );

ऊपर बताये गए code में Submit Comment के स्थान पर अपने हिसाब से भी कोई text add कर सकते हो।

Show Related Posts in Below post ―

यह बहुत important widget होता है और लगभग blogs मे आपको post के नीचे related post show होंगे. इससे हमारे readers को similar post पढ़ने में आसानी होती है. इससे ब्लॉग की pageviews increase होने के साथ साथ search engine ranking भी बढ़ती है. जब आप अपने post के नीचे related posts show करोगे तो इससे internal links की संख्या भी बढ़ेगी और आपके post की SERPs बढ़ेगी। आप मेरे ब्लॉग के post के नीचे भी related post का widget देखते होंगे. इसी तरह अगर आप भी अपने ब्लॉग में related posts show कराना चाहते हो तो नीचे दिए गए code को theme की functions.php में add करें।

/** BLH related post widget */
function related_posts_categories() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$cats = wp_get_post_categories( $post->ID );
$catIDs = array( );{
foreach ( $cats as $cat ) {
$catIDs[] = $cat;
}
$args = array(
'category__in'          => $catIDs,
'post__not_in'          => $postIDs,
'showposts'             => 5,
'ignore_sticky_posts'   => 0,
'orderby'               => 'rand',
'tax_query'             => array(
array(
'taxonomy'  => 'post_format',
'field'     => 'slug',
'terms'     => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote' ),
'operator' => 'NOT IN'
)
)
);
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . get_the_title() . '</a></li>';
}
}
}
if ( $related ) {
printf( '<div class="post-related"><h3>Read More Similar of this:―</h3><ol>%s</ol></div>', $related );
}
wp_reset_query();
}
}
add_action( 'genesis_after_entry_content', 'related_posts_categories' );

ऊपर code में ‘showposts’ => 5, में आप 5 के स्थान पर जितने posts show करना चाहते हैं वो लिखेंके स्थान पर अपने हिसाब से जितना posts show करना है तो लिख सकते हो. अगर आपको related post को better look देना चाहते हो तो इसके लिए नीचे CSS code को अपने ब्लॉग में add कर लीजिए।

.post-related li:hover,.related_post a:hover{text-decoration:underline} .post-related{padding:15px 40px 5px;border:1px solid #dfdfdf;border-left:2px solid #1da1f2;font-size:16px;border-radius:2px;text-transform:capitalize}.post-related li{list-style-type:decimal;line-height:2.5} .post-related{padding:15px 40px 5px;border:1px solid #dfdfdf;border-left:2px solid #f1574d;font-size:16px;border-radius:2px;text-transform:capitalize}.post-related li{list-style-type:decimal;line-height:2.5}.post-related h3{background:6699cc;width:100%;margin:3px;text-align:center;text-transform:uppercase;border:1px dotted #fff}.post-related a{font-family:'Fauna One';font-weight:700;color:#dd4242}

Post के नीचे Social Share button कैसे Add करें ―

अब हम आपको जो बताने जा रहे हैं वो सबसे important है. हम आपको बताने वाले हैं कि बिना किसी plugin के ब्लॉग में Social Sharing buttons कैसे add करें. जब आपके ब्लॉग में social share buttons होगा तो visitors post को आसानी से social media में share कर पायेगा. इसको आप plugin के मदद से भी add कर सकते हो लेकिन अगर आप इन्हें manually add करना चाहते हो तो बस आपको कुछ simple code को अपने theme में add करना होगा।

नीचे दिए code को functions.php में add करें।

/* Add a social sharing buttons **/
function blhi_social_sharing_buttons($content) {
 global $post;
 if(is_singular()){
 $blhiURL = urlencode(get_permalink());
 $blhiTitle = str_replace( ' ', '%20', get_the_title());
 $blhiThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
 $twitterURL = 'https://twitter.com/intent/tweet?text='.$blhiTitle.'&url='.$blhiURL.'&via=blogginghindi';
 $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$blhiURL;
 $googleURL = 'https://plus.google.com/share?url='.$blhiURL;
 $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$blhiURL.'&title='.$blhiTitle;
 $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$blhiURL.'&media='.$blhiThumbnail[0].'&description='.$blhiTitle;
 $content .= '<div class="blhi-social">';
 $content .= '<h5>SHARE ON SOCIAL MEDIA:</h6><div class="blhi-link blhi-facebook"><a href="'.$facebookURL.'" target="_blank"><i class="fa fa-facebook"></i><span class="bh_share"> Share</span></a></div>';
 $content .= '<div class="blhi-link blhi-twitter"><a href="'. $twitterURL .'" target="_blank"><i class="fa fa-twitter"></i><span class="bh_share"> Tweet</span></a></div>';
 $content .= '<div class="blhi-link blhi-googleplus"><a href="'.$googleURL.'" target="_blank"><i class="fa fa-google-plus"></i><span class="bh_share"> +1</span></a></div>';
 $content .= '<div class="blhi-link blhi-linkedin"><a href="'.$linkedInURL.'" target="_blank"><i class="fa fa-linkedin"></i><span class="bh_share"> Share</span></a></div>';
 $content .= '<div class="blhi-link blhi-pinterest"><a href="'.$pinterestURL.'" data-pin-custom="true" target="_blank"><i class="fa fa-pinterest"></i><span class="bh_share"> Pin it</span></a></div>';
 $content .= '</div>';
 return $content;
 }else{
 return $content;
 }
};
add_filter( 'the_content', 'blhi_social_sharing_buttons');

इसको अच्छा look देने के लिए नीचे दिए गए CSS को अपने Theme में add करें।

/* BloggingHindi Social Share CSS */
.blogginghindi-link i{color:#fff}.blhi-social {
 margin: 20px 0
}
.blhi-link {
 color: #fff!important;
 border-radius: 2px;
 margin: 5px;
 cursor: pointer;
 display: inline-block;
 transition: .5s;
 vertical-align: middle;
 width: 130px;
 height: 32px
}
.blhi-link:hover {
 width: 170px!important;
 background: #777
}
.blhi-social:hover .blhi-link {
 width: 120px
}
.blhi-link i {
 color: #fff;
 margin-top: 8px;
}
.blhi-link a {
 padding-left: 42%;
 text-decoration: none!important
}
.blhi-link:hover a {
 padding-left: 30%;
 transition: .5s
}
.blhi-link .bh_share {
 margin: 10px;
 display: none;
 transition: 1s;
 color: #fff;
 font-size: 14px;
 text-decoration: none
}
.blhi-link:hover .bh_share {
 display: inline
}
.blhi-facebook {
 background: #3a589e
}
.blhi-twitter {
 background: #429cd6
}
.blhi-googleplus {
 background: #df4b37
}
.blhi-buffer {
 background: #444
}
.blhi-linkedin {
 background: #0d77b7
}
.blhi-pinterest {
 background: #cd2029
}
@media only screen and (max-width:768px) {
.blhi-link a {
 padding: 20px
 }
.blhi-link,.blhi-link:hover {
 width: auto!important
 } 
.blhi-link:hover .bh_share {
 display: none
 }
}

अब आपके ब्लॉग के post के नीचे में social sharing buttons show होने लगेंगे.

इस तरह से आप अपने Genesis theme को customize करके अच्छे से design कर सकते हो। इसी तरह हम आने वाले समय मे Genesis के बारे में कुछ और भी post share करने वाले हैं. इस post को share करके हमारी सहायता करें। अगर आपको कोई सवाल पूछना है तो आप नीचे comment drop कर सकते हो.