WBXPress.NET

Website Developement Guide

Customizing Genesis eleven40-pro Theme

Updated: by 102 Comments

This tutorial is for customization of eleven40-pro, a child theme of genesis by studiopress.com. eleven40-pro is one of the most popular premium genesis child theme. The codes written for different genesis child themes are very similar because they are all of same parent theme i.e. genesis framework. If someone learn to customize a particular child theme of genesis, he/she can also customize other child themes similarly.

You may like to know: Customizing Genesis Sample Child Theme

Customizing any theme requires editing of functions.php and style.css file inside theme directory. If you have edit permission from wordpress dashboard, you may change it from Appearance->Editor->functions.php or style.css. Always refresh your browser cache to see style changes.

1. Change fixed header to Unfixed.

The header of eleven40-pro theme is normally fixed, that means whenever you scroll a page, the header remains always visible. So, the header part always occupy a certain height of your screen. This may be unwanted for many website developers. So we change fixed header to unfixed header. Find .site-header { in style.css.

.site-header {
...
position: fixed; // Remove this line
...
}

Whenever you make your header unfixed, you will see an increased margin below header area. So to adjust you need to change margin values.

.site-inner {
	clear: both;
	margin: 65px 0 40px; // Change 65px to 0
}

2. Remove featured post from home page

The home page of this theme is a two column grid with featured post at the top. The first post (featured) is displayed in full length. If you want to disable featured post, goto Appearance->Editor->home.php

genesis_grid_loop( array(
'features' => 1,  // Change 1 to 0

3. Completely Remove Grid style Homepage

Rename home.php to home-old.php
You can not rename a file from wordpress dashboard. You need to either use a FTP client or have root access to your hosting account or need to ask your host to rename this file.

4. Display post excerpts instead of full length

Goto Genesis->Theme Settings->Content Archives->Display Post Excerpts

excerpts

5. Change Footer Credit Texts

Add the following code inside functions.php

//* Change the footer text
add_filter('genesis_footer_creds_text', 'wbxp_footer_creds_filter');
function wbxp_footer_creds_filter( $creds ) {
	$creds = 'Copyright © by Yoursite Name · All rights reserved · Log in';
	return $creds;
}

6. Remove Website Field from Commentators

Add this code inside functions.php

//* Remove Website Field
add_filter('comment_form_default_fields', 'wbxp_remove_comment_url');
function wbxp_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}

7. Remove Comment Form Allowed Tags and Display a Custom Message

Add this inside functions.php

//* Remove comment form allowed tags
add_filter( 'comment_form_defaults', 'eleven40_remove_comment_form_allowed_tags' );
function eleven40_remove_comment_form_allowed_tags( $defaults ) {
	
	$defaults['comment_notes_after'] = 'Do not share your Mobile number.';
	return $defaults;

}

8. Display Excerpts for Pages

By default genesis support only excerpts for posts. You may add excerpts for pages also. Add the following inside functions.php

add_post_type_support( 'page', 'excerpt' );

Now you can see Excerpt for pages also.

page-excerpt

9. Change Font size of different Headings

eleven40-pro theme uses large font size, lots of white space, margin, padding, etc. We now change these things to make this theme looks compact. All these values are calculated from our end to make this beautiful as per our views. So you may change with your own values accordingly in style.css.

h1 {
font-size: 24px;
}

h2 {
font-size: 20px;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 15px;
}

h6 {
font-size: 14px;
}

10. Change Font Size of Post Title

.entry-title {
font-size: 36px;  // Change 36px to 24px
line-height: 1;
}

11. Change Font Size of Body Text

Change in style.css

body {
...
font-size: 18px; // Change 18 to 14
...
}

12. Change Font Size of different Sections

Sections are self explanatory, so we only put the changes in style.css.

blockquote::before {
font-size: 14px;

.breadcrumb {
font-size: 12px;

.archive-description h1,
.author-box h1 {
font-size: 14px;

.archive-description p,
.author-box p {
font-size: 13px;

.site-title {
font-size: 22px;

.genesis-grid {
font-size: 14px;
}

.entry-meta {
font-size: 14px;
}

.comment-header {
font-size: 14px;
}

.sidebar {
font-size: 14px;
}

.footer-widgets {
font-size: 13px;

.site-footer {
font-size: 13px;

input,
select,
textarea {
font-size: 14px;

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
font-size: 14px;

.wp-caption-text {
font-size: 14px;

.archive-title {
font-size: 16px;

13. Change margin and padding of different sections

.site-description {
font-size: 16px;
margin: 30px 0 0;
padding: 18px 0;
}

.site-description {
font-size: 14px;
}

p {
margin: 0 0 18px;
padding: 0;
}

blockquote {
margin: 30px 30px 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 14px;

input,
select,
textarea {
padding: 14px;

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
padding: 14px 18px;

table {
margin-bottom: 30px;

.site-inner {
clear: both;
margin: 0 0 24px;
}

.content {
padding: 24px 30px 18px;

.full-width-content .content {
padding: 30px 0 0;
}

.genesis-grid-even,
.genesis-grid-odd {
margin-bottom: 16px;
}

.alignleft .avatar,
.author-box .avatar {
margin-right: 20px;
}

.alignright .avatar {
margin-left: 20px;
}

.entry-comments .avatar {
margin: 0 14px 20px 0;
}

img.alignleft,
.featured-content .alignleft img,
.wp-caption.alignleft {
margin: 0 20px 20px 0;
}

img.alignright,
.featured-content .alignright img,
.wp-caption.alignright {
margin: 0 0 20px 20px;
}

.breadcrumb {
font-size: 12px;
margin-bottom: 24px;
padding: 10px 14px;
}

.archive-description,
.author-box {
margin-bottom: 30px;
padding: 30px;
}

.sidebar-content-sidebar .archive-description,
.sidebar-content-sidebar .author-box {
margin: 0 -30px 30px;
}

.widgettitle {
margin-bottom: 20px;
}

.archive-title {
margin-bottom: 20px;
}

.genesis-nav-menu a {
padding: 22px 16px 20px;
}

.genesis-nav-menu .sub-menu a {
padding: 14px 16px;
}

.nav-primary .genesis-nav-menu .sub-menu .sub-menu {
margin: -47px 0 0 189px;
} //kept same

.nav-primary .sub-menu a {
padding: 14px 16px;
}

.entry {
margin-bottom: 20px;
}

.single .entry {
margin-bottom: 14px;
}

.eleven40-landing .entry {
padding: 20px 30px 14px;
}

.entry-content ol,
.entry-content p,
.entry-content ul {
margin-bottom: 14px;
}

.entry-content ol,
.entry-content ul {
margin-left: 30px;
}

.entry-header .entry-meta {
margin-bottom: 14px;
}

.entry-footer .entry-meta {
padding-top: 10px;
}

.after-entry {
background-color: #f5f5f5;
margin-bottom: 20px;
padding: 14px;
text-align: center;
}

.after-entry .widget {
margin-bottom: 30px;
}

.archive-pagination,
.entry-pagination {
margin: 30px 0;
}

.entry-comments,
.ping-list {
margin-bottom: 20px;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 30%
}

/* Forms

input,
select,
textarea {
padding: 6px;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
padding: 8px 18px;
}

.comment-respond label {
margin-right: 12px;
}

.comment-list li,
.ping-list li {
margin-top: 12px;
padding: 16px;
}

.comment-list li li {
margin-right: -16px;
}

.sidebar {
padding-top: 24px;
}

.sidebar .widget {
margin-bottom: 30px;
}

.footer-widgets {
padding-bottom: 30px;
padding-top: 30px
}

.footer-widgets-1 {
margin-right: 30px;
}

.footer-widgets .widget {
margin-bottom: 30px;
}

.site-footer {
padding: 10px 12px;
}

.genesis-nav-menu.responsive-menu li.current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
padding: 16px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
padding: 12px 16px;
}

.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
padding: 16px;
}

.author-box {
padding: 16px;
}

.footer-widgets .widget:last-child {
margin-bottom: 30px;
}

That’s all. We hope you like this new look of eleven40-pro theme after making above changes. If you have any suggestion or question please feel free to comment below. We’ll get back to you.

Related Posts:

Reader Interactions

Comments

    • You almost reached there.
      Further tips:
      1. Update your eleven40 theme to eleven40-pro.
      2. Use Developer Tools->Inspector of Mozilla Firefox to find every details of the said site.
      3. Apply those values to your own theme’s style.css

      Reply

      • Yesterday While editing your theme i got an errors following your codes then I didn’t edited more 🙁

        Please look at those code once and give a try…

        #7 try that once and do let me know.

        Will You suggest how to edit properly without getting any error ?

      • Sorry to hear that. The above codes were tested in our site. You can find out that the code #7 is applied here and it is working fine.
        Try adding the code snippet at the end of functions.php.
        I suggest you to apply codes one by one.

  3. Ok! I will Be trying all the codes again and while adding css codes where should i add those in

    Dashboard — Appearance — Edit CSS

    This one is because of Jetpack plugin…

    Or

    Dashboard — Apperance — Editor — Style.css

    In which one should I try?

    Reply

  5. Just Check my site once. I have done all the stuffs and say me what i need to improve. Your tutorial was awesome and worked for me great thank you 🙂

    Reply

  6. Excellent guide. I definitely appreciate the help. #3 however didn’t go into too much explanation. How does this work exactly? Simply renaming the home.php file solves the problem? How/Why does this work?

    I’m looking to remove the grid layout on my site as well.

    Reply

    • Thank you for your complement. If you want to remove grid layout in home page then you need to either remove home.php or rename the file because this home.php file consists code for grid layout system.

      Reply

  7. Hi,
    Could you please let me know about the Genesis Framework Theme “Focus Pro Theme”. It’s a child theme of Genesis Framework. And Please let me know the free download link of this theme. Would appreciate that much.

    Thanks
    Kamrulrich@gmail.com

    Reply

    • This theme is a premium theme and you need to purchase it. Any illegal copy found in internet may contain malicious code inside the theme. So beware of it.

      Reply

  10. Hello sir i recently purchased genesis parent and 40pro child theme but i want my site like same as alltechbuzz.net can you plz review that site and plz tell me how can i customize my theme like thqt site

    Reply

  11. Hi there,

    I need to increase the width of my sidebar. By default eleven40 pro there have 250px of sidebar. This is an issue when it comes to placing google adsense and some other banners which is usually 300px. Can you help me to solve this issue.

    Reply

  13. in the homepage, even if you set the post content to excerpt, the latest post still shows the full length. is there a way to change it to excerpt?

    Reply

  17. I’m trying to configure the Responsive Menu plugin to work with eleven40 Pro. The instructions say:

    Insert the following shortcode in your theme where you want the menu to show (which is normally in the header, i.e. header.php)

    echo do_shortcode(‘[responsive_menu_pro]’);

    The only .php files I can find are:

    functions.php (the developer, who’s not familiar with Genesis, says this is not the appropriate file)
    home.php
    theme-defaults.php
    page_landing.php

    Can you please help me with this?

    Reply

  20. Hi i tried the thing mentioned here.. Style.css file updated but the changes is not showing .. Kindly check my blog once .. I want to remove sub title of the blog .. It is taking my space .. So kindly check and give solution dear

    Reply

    • Open functions.php file and remove the following line:-

      add_action( 'genesis_before_content_sidebar_wrap', 'genesis_seo_site_description' );
      Reply

  25. Any way to change grid structure in eleven 40 pro theme without modifying file name.
    Very Good Article to edit eleven 40pro theme
    Thanks you

    Reply

  36. Hello bro ! i have one doubt ! can u tell how to add google font the right way ! it load whenever page is reloaded ! or the way you mentioned in your google font is best ??

    Reply

  38. Hi Bro,

    Previously, I am using this eleven pro theme for my website, later I move on to another theme.

    Eleven pro theme looks great and loading speed also very nice. I really love that theme, but customization takes little more stuff for me, this post help me to solve that issue also.

    Thank you

    Reply

  54. Hi,
    I m trying to change the header color of genesis using eleven40 pro but it seems there is no option available do it. How to customize eleven40 pro to change the header please explain if you know.. thanx

    Reply

  58. Is there any plugin available for the same, I’m weak at CSS so let me know if there is any plugin or alternative language available for this work.

    Reply

  61. Hi,

    I am using the latest version of the eleve40 theme. I want to disable the featured post, the first post that is displaying in full length.

    I couldn’t find the home.php in Genesis theme. Can you help me how to remove the featured post from the homepage.

    Eleven40 Pro ThemeVersion: 2.2.1
    GenesisVersion: 2.6.1

    Please advise.

    Reply

  63. I want to show direct menu items instead of a triple bar icon ≡ while in the mobile view. Can you help me out? Please.

    Waiting for your reply.

    Reply

Leave a Reply to digitalsonly Cancel reply

Your email address will not be published. Required fields are marked *