How to Add Custom Gravatar for Comments in Genesis Theme

Gravatar has become a part of many websites and blogs. In fact, the use of Gravatar by internet users is ever raising.

In WordPress, the most prominent place where the Gravatars appear publicly is when a user or visitor comments in your blog’s commenting section.

That’s the reason why WordPress comes with built-in support for the Gravatar.

That being said, not every commentator of you website will have a Gravatar. When there is no Gravatar, the WordPress will display the “Mystery Man” image to compensate the lack of Gravatar image.

Of course, you can always customize the default avatar between Gravatar Logo, Identicon, Wavatar, MonsterID, Retro, and Blank (none image). Or, you can even add their own first letter in their names as their avatar.

Additionally, you can also set your own custom Gravatar so that the image blends with your side design or content. So, here is how you can add custom Gravatar for comments in Genesis.

Add Custom Gravatar for Comments in Genesis

To add custom Gravatar for comments in Genesis, we need to add a simple code snippet.

Before that, make sure that you have an image something like your website logo with the dimensions 48 X 48 pixels and name it gravatar.png. In my case,

I’m using the Bloggersignal logo as the site’s custom comment avatar.

Now, we need to upload the image. To do that, fire up your FTP client, navigate to Genesis child theme folder. Here, open the folder “Images” and upload the image to that folder.

Add custom Gravatar for comments in Genesis - Upload custom Gravatar image.

After uploading the image, navigate to Genesis child theme folder and open the file functions.php.

Add custom Gravatar for comments in Genesis - Open functions file.

Once the file has been opened, copy and paste the below code in the file. Once you are done adding the code, save and reupload the file.

If you’ve saved your custom Gravatar image with a name other than gravatar.png, then change the image file name accordingly in the below code.

// Create a custom Gravatar
add_filter( 'avatar_defaults', 'sp_custom_gravatar' );
function sp_custom_gravatar ($avatar) {
	$custom_avatar = get_stylesheet_directory_uri() . '/images/gravatar.png';
	$avatar[$custom_avatar] = "Custom Gravatar";
	return $avatar;
}

Now, we need to enable the added custom Gravatar in WordPress dashboard. To do that, open the Discussion settings page by navigating to “Settings” and then “Discussion.”

Add custom Gravatar for comments in Genesis - Open Discussion settings.

Once you are in the Discussion settings page, scroll down and select the radio button “Custom Gravatar” and click on the “Save changes” button to save the changes.

Note: Sometimes you may not see the “Custom Gravatar” option. Try clearing the cache.

Add custom Gravatar for comments in Genesis - Select custom Gravatar.

That’s all there is to do. From this point forward, your own custom Gravatar will appear whenever the commentator of your site has no Gravatar.

Add custom Gravatar for comments in Genesis - Custom Gravatar in action.

Alternatively, you can also set the first letter in the users names as their Gravatar. This approach makes the Gravatars more dynamic and unique.

As a side note, removing website URL field in the comments form reduces the comment spam.

Hopefully that helps and do comment below sharing your thoughts and experiences about using the above method to add custom Gravatar for comments in Genesis.

How to Add Custom Favicon to Genesis Child Themes

Favicons are major website brand influencers and they also help your website visitors to identify your blog or website quickly when there are a ton of tabs opened in their browsers. Generally, the Genesis theme framework and the child themes will display the default Genesis logo as their favicon. But as a website owner, you need to upload your own custom favicon as that increases your brand awareness.

For those of you who don’t know, Favicon’s are nothing but small images that appear next to your website or blog title in the browser tabs. Generally, a favicon image can either be in .png or .ico formats. So, here is how you can add a custom favicon to Genesis child themes in few different ways.

Note: This tip to add a custom favicon will work with any Genesis child theme. Moreover, I assume that you already have a favicon in either 16 X 16 or 32 X 32 size.

Custom Favicons of different websites.

Add Custom Favicon Through functions.php

One way to add a custom favicon to your Genesis child theme is to add the below piece of code in your functions.php file. To start off, you first need to upload the favicon to your child theme’s Images folder. Usually, the child theme is located under /wp-content/themes/ folder. So, fire up your FTP client software and upload the image.

Upload custom favicon.

After uploading the image, open up the functions.php file with your favorite text editor and copy and paste the below code at the end of the file. Don’t forget to change the URL according to your site’s favicon location.

// Add Custom Favicon to Genesis Child Theme
add_filter( 'genesis_pre_load_favicon', 'custom_favicon_filter' );
function custom_favicon_filter( $favicon_url ) {
return 'http://www.example.com/wp-content/themes/theme-name/images/favicon.png';
}

That’s all there is to do and once the code has been added, this is how it looks.

Paste the code for custom favicon.

Add Custom Favicon using Plugin

The other way to add favicon to your Genesis child theme is by using the Genesis Favicon Uploader plugin. You can download and install it like any other WordPress plugin. Once installed, open up the Favicon Uploader page by navigating to “Genesis -> Upload Favicon.”

Install the plugin and upload the plugin.

For this to work, you first need to convert your favicon into .ico format if the favicon is in other formats like .png. Now, simply click on the “Choose File” button, select the favicon and click on the “Upload Favicon” button and you are good to go.

Replace Genesis Favicon with Custom Favicon

Lastly, you can also add custom favicon by just replacing the default Genesis favicon located in the Genesis framework folder.

To do that, open your FTP client, navigate to /wp-content/themes/genesis/images folder.

Here, just replace the favicon.ico with your custom favicon file. Also, make sure that the favicon is in .ico format.

Upload custom favicon to the default genesis folder.

Though this process is really easy, it is not recommended to use this method. This is because, you are directly editing the Framework files and whenever you update the Genesis theme framework, all the files will be replaced and any changes you made will be lost.

That’s all there is to do and it is that simple to add a custom favicon to your Genesis child theme.

Hopefully that helps and do comment below sharing your thoughts and experiences about using the above methods to add a custom favicon to Genesis child theme.

How to Add Google Custom Search Engine to Genesis Framework or Child Themes

WordPress has its own search function and for general usage, it works perfectly fine. The thing is, the default search function in WordPress it is not so efficient or robust in phrasing the search results. i.e, there will be a several miss matched list of results way too often.

The good thing about using WordPress is that you can easily integrate the Google custom search with WordPress search.

But if you are using any of the Genesis child themes, then the process of adding Google Custom Search Engine (CSE) will be a bit different.

So, without further ado, let me guide you on how to add Google custom search engine to Genesis.

Add Google Custom Search Engine to Genesis

The process to add Google custom search engine to Genesis is quite simple and easy. Moreover, the process is applicable to any Genesis child theme.

1. To start off, you first need to create a custom search engine from Google. Head over the Google Custom Search page, click on the link “New Search Engine” and create a new search engine for your website.

Create new Google custom search engine for website.

2. After creating the custom search engine, head over to the “Look and Feel” section and select the option “Results Only.” This ensures that the Google Custom Search Engine will only produce search results and nothing else so that we can integrate them to our Genesis child theme.

Select Results Only option under the Look and Feel section.

3. Now, click on the link “Setup” and then click on the button “Get code” to get the custom search engine code.

Get your custom search engine code from the Setup section.

6. The above action will display the custom search engine code. From the code, copy the CX ID and save it somewhere. We are going to need it in the next steps.

Copy the CX ID from the displayed code.

7. Now, create a new file on your desktop with the name page_googlecse.php and add the below code to that file. After adding the code, don’t forget to add your CX ID as notified in line 18.

You can also download the file if you need.

<?php
/*
 * Template Name: Google CSE
 *
 */

add_action( 'genesis_meta', 'bs_noindex_page' );
function bs_noindex_page() {
	echo '<meta name="robots" content="noindex, follow">';
}

add_action( 'genesis_meta', 'bs_google_cse_meta', 15 );
function bs_google_cse_meta() { ?>
 
	<script>
  		(function() {
    	
    		var cx = '00030xxxxxxxxxxxxx:xxxxxx3ye0'; // Insert CX code
    		var gcse = document.createElement('script');
    		gcse.type = 'text/javascript';
    		gcse.async = true;
    		gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
    		var s = document.getElementsByTagName('script')[0];
    		s.parentNode.insertBefore(gcse, s);
  		})();
</script>
<?php 
}

add_filter( 'body_class', 'bs_add_body_class' );
function bs_add_body_class( $classes ) {
   
   $classes[] = 'google-cse';
   return $classes;
}

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'bs_custom_content' );
function bs_custom_content() { ?>
	<article class="entry" itemtype="http://schema.org/SearchResultsPage" itemscope="itemscope">
		<header class="entry-header">
			<h1 class="entry-title" itemprop="headline">
    			<?php echo get_the_title(); ?>
    		</h1>
    	</header>
    	
    	<div class="entry-content" itemprop="text">
    		<?php echo get_the_content(); ?>
    		<gcse:searchresults-only linkTarget='_self'></gcse:searchresults-only>
    	</div> 
    </article> 
		
<?php }
genesis();

6. After creating and editing the file, upload it to your Genesis child theme folder. Generally, the location of your Genesis child theme will be something like wp-content/themes/yourChildTheme.

Upload custom search engine template file to your child theme folder.

7. After uploading the file, open up your theme’s functions.php file and add the blow code to it, save and reupload the file.

// Alter the Genesis Search
add_filter( 'genesis_search_form', 'bs_search_form', 10, 4);
function bs_search_form( $form, $search_text, $button_text, $label ) {
 
$onfocus = " onfocus=\"if (this.value == '$search_text') {this.value = '';}\"";
$onblur = " onblur=\"if (this.value == '') {this.value = '$search_text';}\"";
$form = '<form method="get" class="searchform search-form" action="' . home_url() . '/search" >' . $label . '
<input type="text" value="' . esc_attr( $search_text ) . '" name="q" class="s search-input"' . $onfocus . $onblur . ' />
<input type="submit" class="searchsubmit search-submit" value="' . esc_attr( $button_text ) . '" />
</form>';
 
return $form;
 
}

8. That’s all for the coding part. Now, create a new page by navigating to “Pages > Add New.”

9. Enter the title of the page whatever you want but make sure that the page URL is /search/. For instance, you should be able to access it using http://example.com/search/.

10. In the Page Attribute section, select “Google CSE” from the Template drop-down menu.

11. Now, head over to the Widgets section in your WordPress admin area, drag and drop the regular search widget to your desired location.

Place the regular search widget on the sidebar.

That’s all there is to do and you’ve successfully added Google Custom Search Engine to Genesis. From this point forward, the WordPress search feature is replaced with Google Custom Search and all the results are delivered with the power of Google.

Hopefully that helps and do comment below sharing your thoughts and experiences about using the above method to add Google Custom Search Engine to Genesis.

How To Configure Genesis Settings After Installing The Framework

Genesis theme framework is one of the best and no-nonsense WordPress theme framework’s that is open for almost all possible website variants like portfolio, business, blogs, etc.

Unlike other theme frameworks, Genesis doesn’t come with a whole bunch of fancy settings, out-of-the-box sliders, etc., to bloat your WordPress site, but has all the necessary features and options to configure accordingly.

That being said, configuring these basic settings may be a bit confusing if you have never used Genesis framework before. So, here is a detailed guide on how to configure the default Genesis settings.

Note: Before starting, I assume that you have already installed Genesis theme framework and a child theme. If not, download Genesis theme framework from its official website.

Configure Genesis Theme Settings

You can easily access Genesis settings page by selecting the link “Theme settings” under the “Genesis” category in your WordPress admin area.

Genesis Information: In the general information area of Genesis settings, you can select the check boxes for automatic updates and notification alerts when the updates are available. As per the usage, I recommend you to add your email address in the “Notify” field to get notified immediately whenever there is an update available.

genesis-settings-information

Theme Color Style: Depending on your child theme, you can select different color schemes for your website or blog. By default, most Studiopress themes come either in three or four color schemes like red, blue, green, orange, etc. So, select the color style from the drop-down menu depending on your taste and requirements.

genesis-settings-color-style

Custom Feeds: By default, ever WordPress site has two different feeds, i.e. general feed URL for the blog posts and a comment’s feed for any comments on your site. Genesis supports feed redirection out-of-the-box for both the Feedburner and Feedblitz services. So if you are using any of the mentioned services then use the feed redirection options to properly redirect users to the feed service.

genesis-settings-custom-feeds

As you can see from the above image, I’m using Feedburner for Bloggersignal RSS Feed. So, I’ve entered my Feedburner URL.

Default Layout: Here you can select any of the displayed theme layouts, simply select a layout with your mouse and save the changes. Depending on your theme, the number of layout options may vary and the default theme layout is already set by your child theme. But you can always change from the available ones.

But you can always change from the available ones, if needed.

genesis-settings-default-layout

Breadcrumbs: Breadcrumbs are nothing but a simple navigation displayed on top of your articles. If you choose to display the Breadcrumbs on your site, simply select the area you want to display and save the changes. Breadcrumbs are particularly useful in SEO perspective and for easier user navigation.

genesis-settings-breadcrumbs

Comments and Trackbacks: Here in this section, you can easily enable and disable comments and trackbacks on posts and pages.

genesis-settings-comments-trackbacks

Content Archives: Content Archives section is one of the important sections of the Genesis settings page as it helps you define how your archives look on the front end. The best recommendation would be to limit the number of characters displayed in the content archive and to enable the “Featured Image” setting.

Besides that, you can also select the post navigation techniques based on your design and taste.

genesis-settings-content-archives

Blog Page Template: If you are using your WordPress site as a blog, then you can define what categories to be displayed and what categories to be excluded from the blog page using the Blog Page Template settings. This is particularly useful if you have categories that you don’t want to be listed on the blog page.

Besides that, you can also set number of posts that can be displayed at a time on your blog page.

genesis-settings-blog-page-template

Header and Footer Scripts: Header and Footer scripts area can be used to insert or add any external scripts like Google Analytics, social widget codes, etc. This provides an easy way to add scripts without manually messing with the theme files.

genesis-settings-scripts

Scripts pasted in wp_head() field will be executed immediately before the head tag and scripts pasted in wp_footer() field will be executed just before the closing body tag.

That’s all there is to do and it is that simple to configure basic Genesis theme framework settings.

Once you have configured everything, it is always a good thing to backup your Genesis theme settings. To do that, open the “Import or Export” page under Genesis category and export the settings onto your local hard drive.

Conclusion

As you can see, Genesis theme settings offer almost all the basic options and are also quite easy to configure. Besides from the theme settings, Genesis does have basic SEO settings to help increase your site’s search engine rankings.

But if you want more control over the SEO, then I would recommend you to use advanced plugins like WordPress SEO by Yoast.

Hopefully that helps and do comment below sharing your thoughts and experiences about using the Genesis Framework.

How to Install Genesis Theme Framework and Child Theme in WordPress

WordPress has a range of theme frameworks which offer an easy theme maintenance and all the advanced features required for almost any site variant. Genesis framework is one of the most feature-rich, user-friendly and WordPress standards abiding theme framework available out there with no frills whatsoever.

But unlike the regular WordPress themes, Genesis framework comes bundled as a framework and child theme. So in order to use a Genesis theme, you need to properly install both the framework and the child theme.

Since this is a bit different from the regular theme installation, people who are just starting out may get a bit confused with all the technical jargon regarding the installation of parent and child themes.

So if you are wondering, here is how you can install Genesis theme framework and child theme in WordPress.

Note: Before starting, I assume that you have already bought the Genesis framework.

Install Genesis Framework and Child Theme

Even though we can use other advanced options like FTP to install the framework and the child theme, I’m going to use the regular in-built WordPress options for this tutorial.

1. To start the installation process, log in to your Studiopress account to download relevant files.

install-genesis-framework-account-login

2. Now, head over to the Studiopress downloads page and download both the framework and the child theme. As for me, I’ve downloaded both the framework and the child theme “eleven40 Pro.”

install-genesis-framework-download-theme

3. Once downloaded, login into your WordPress admin area and navigate to the “Themes” page under the “Appearance” category.

install-genesis-framework-themes-page

4. Here click on the “Add New” button.

install-genesis-framework-add-new

5. Since we are going to upload both the framework and the child theme, click on the button “Upload Theme.”

install-genesis-framework-upload-theme

6. Here in this page, click on the button “Choose File,” browse for the downloaded Genesis Framework (zip file) and click on the “Install Now” button to start the framework installation process.

install-genesis-framework-select-framework

7. Once the installation is complete, the screen will look something like this. There is no need for you to activate the framework yet.

install-genesis-framework-genesis-installed

8. Now, open the theme upload page again. Here click on the “Choose File” button, browse for the downloaded child theme (zip file) and click on the “Install Now” button. In my case, I’ve selected “eleven40-pro” file as it is my downloaded child theme.

install-genesis-framework-select-child-theme

9. As soon as you click the button, WordPress proceeds and installs the child theme. Once installed, click on the “Activate” link to active the installed child theme. If you want to preview the installed child theme before activating, just click on the “Live Preview” link.

install-genesis-framework-activate-child-theme

10. After successfully installing and activating the theme, you need to configure basic Genesis theme settings, widgets, and other stuff. Each and every Genesis child theme is special and has its own setup routine. But the good thing is that the framework developers got you covered as you can find the theme specific setup instructions right in the downloads area.

install-genesis-framework-theme-setup-guide

Also, Genesis does have its own framework and theme-specific plugins. So do give them a try to extend the functionality even further and makeover your site. That’s all there is to do and it is that simple to install Genesis framework and child theme in WordPress.

Hopefully that helps and do comment below if you face any problems or just to share your thoughts and experiences about using Genesis framework.