Customizing Genesis eleven40-pro Theme

·

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.

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 · [footer_loginout]';
	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.

115 responses to “Customizing Genesis eleven40-pro Theme”

  1. Xaif Avatar
    Xaif

    Amazing… will be trying this tutorial which font you are using in your site?

    1. wbxpress Avatar
      wbxpress

      Thanks for your comment.
      Fonts used: Montserrat and Neuton.

      1. Xaif Avatar
        Xaif

        That was a quick reply.

        While editing function.php and other style sheet i got an error of pluggable.php and now i cant edit anything

        https://postimg.org/image/u34tug0pt/

      2. wbxpress Avatar
        wbxpress

        The error occurs when you are not editing theme files / wp-config.php etc. with plain text editor. Use Notepad++ for editing theme files.

        please check this: https://codex.wordpress.org/FAQ_Troubleshooting#How_do_I_solve_the_Headers_already_sent_warning_problem.3F

  2. Xaif Avatar
    Xaif

    I want my theme look like this site. Can You help me out

    (https://alltechbuzz.net)

    I know its eleven40 but how to edit like his site…

    1. wbxpress Avatar
      wbxpress

      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

      1. Xaif Avatar
        Xaif

        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 ?

      2. wbxpress Avatar
        wbxpress

        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. Xaif Avatar
    Xaif

    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?

    1. wbxpress Avatar
      wbxpress

      you should try second option.

      1. Xaif Avatar
        Xaif

        Can you share us a guide in which showing how to use Google font without any plugin in our site?

      2. wbxpress Avatar
        wbxpress

        Okay. I will write a post for you today. Please check after an hour.

    2. career Avatar

      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

  4. Xaif Avatar
    Xaif

    I have edited the Theme have a look at my site theme once https://xtremetricks.net

    1. wbxpress Avatar
      wbxpress

      Your site looks nice but there are some problems i noticed right now.
      1. you have displayed google ads 5 times in a single page. this is not permitted as per google adsense policy.
      2. you have not taken advantage of using manual excerpts for posts.

      1. Xaif Avatar
        Xaif

        I was using 5 ads and in that I was using 2 link ads and 3 image ads. And thats it…

        I have not taken advantage of excerpts means?

    2. pavan kumar Avatar

      Help me also bro in editing.. Can u send style.css code to me please..

    3. Durgesh Avatar
      Durgesh

      Can you please send the style.css to me too? My email id is dksvishen@gmail.com

  5. Xaif Avatar
    Xaif

    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 🙂

    1. wbxpress Avatar
      wbxpress

      i have checked your site. it is beautiful now. your site speed is excellent. great job.

      1. Xaif Avatar
        Xaif

        Thanks to you for the great tutorial. I have to ask you one thing. Whenever someone types link in the comment then the page size automatically increases like in your site…

        https://postimg.org/image/5q4ol2al3/

        You have posted one link and because of that this thing happened in your site. In mobile devices.

        Can you share a code in which we can get rid of these errors?

      2. wbxpress Avatar
        wbxpress

        i am sorry to say that i could not understand what you told and also could not understand the screenshot.

        would you mind to tell the problem in more detail?

    2. pavan kumar Avatar

      Bro email me style.css code to me @ pavankumarsake1@gmail.com bro..
      Thanks

  6. KBrizy Avatar
    KBrizy

    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.

    1. wbxpress Avatar
      wbxpress

      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.

  7. kochi97 Avatar
    kochi97

    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

    1. wbxpress Avatar
      wbxpress

      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.

  8. Pius Tolani Avatar

    This was help full. Succesfully Removed fully lenght post on home page.

  9. Nitesh kumar Avatar

    Thanks this helped me a lot.

  10. suprakash mishra Avatar

    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

  11. Hari Avatar

    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.

  12. Muhammad shahid Avatar

    What a great tutorial. Thanku so much bro for this great article

    1. wbxpress Avatar
      wbxpress

      Thank you for your appreciation

  13. ester Avatar
    ester

    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?

    1. wbxpress Avatar
      wbxpress

      Which theme you are using? Try filling manual excerpt before publishing post.

  14. Ronak Avatar

    Any other way possible to remove grid view?

    1. Dilshad Ahmad Avatar

      Yes! login to you cPanel – File manager – Wp Content – Themes – eleven40 – rename Home.php to Home-old.php… Done!

  15. Abdul Razique Avatar

    please tell me theme name which you are using

    1. wbxpress Avatar
      wbxpress

      it is a custom theme. https://wbxpress.net/themes/

  16. Shubham Meena Avatar

    I want to use eleven40 theme on my blog https://www.trickscity.com but I am unable to customize it like other. Can you please help me.

  17. Philip Gibson Avatar

    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?

    1. Satish Avatar
      Satish

      It seems home.php is not in latest versions. I am still looking for that.

  18. Rohan Singh Avatar

    I am using News Pro child theme on my blog – https://www.techtricksnow.com/
    But few of the functions listed above are not working.
    Can you help me sir?

    1. wbxpress Avatar
      wbxpress

      Sure. Please ask which is one is not working.

  19. Lrers Avatar

    It is amazing article to editing eleven-40 pro theme and thanks for sharing

  20. digitalsonly Avatar

    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

    1. wbxpress Avatar
      wbxpress

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

      add_action( 'genesis_before_content_sidebar_wrap', 'genesis_seo_site_description' );
  21. malik ismael Avatar

    thanks a lot . without your help i was unable to customize my blog. again thanks dude.

    1. wbxpress Avatar
      wbxpress

      you are most welcome bro.

  22. Sunil Avatar

    How to design the site title like a logo in the eleven 40 pro theme.

  23. Waqas Rahman Avatar

    Hey i tried to cutomize my theme but i don,t know how to change header menu links color to black…Here is the site https://www.buzzytricks.com/

  24. MEET JAIN Avatar

    awesome detailed guide for begginers!!
    thanks for sharing!!

  25. thirupa Avatar

    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

  26. Nishan Avatar

    Awesome explain very halpfull to new people

  27. Arsh Avatar
    Arsh

    disabling sticky header not working how to fix

  28. Rock Star Raja Avatar

    How to remove the tags from the home page

  29. Ayush Singh Avatar

    Thanks i Just Remove Grid HomePage Section. Now Site Looking Good. Thanks for It

  30. Shiva Chandra Avatar

    Love your Guide. It helps me a lot, and now I edited my site like a pro.

    1. wbxpress Avatar
      wbxpress

      thank you for commenting.

  31. Arsh Sran Avatar

    I really thanks you !
    Very helpful article for me !
    I was messing up with that long post on homepage !
    Finally this helped !
    God Bless You Bro !

  32. emad Avatar

    I really thanks you !
    Very helpful article for me !

  33. Ronak Prajapati Avatar

    Can you please help me how to add full width menu above header

  34. modapkz Avatar

    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 ??

  35. ApkHx Avatar

    How to add google font directly?

  36. Tech Info World Avatar

    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

  37. Smyan Avatar
    Smyan

    I really thanks you !
    Very helpful article for me !
    I was messing up with that long post on homepage !

  38. pankaj bishnoi Avatar

    bro how can i change sidebar title’s heading?
    I didn’t find perfect way to do that.

    1. wbxpress Avatar
      wbxpress

      you need to change style of .widget-title.

  39. Roshan Singh Avatar

    Hi, I’m using eleven40 theme in my site and want to export custom google font in it. Can you tell me how to do it?

  40. tapan Avatar

    nice post … will be trying this tutorial for my blog !

  41. vikrant guleria Avatar

    I really thanks you !
    Very helpful article for me !
    I was messing up with that long post on homepage !
    Finally this helped !
    God Bless You Bro !

    1. wbxpress Avatar
      wbxpress

      thank you for your kind words.

  42. Deepak Tiwari Avatar

    Wow, AMAZING GUIDELINES! Thanks

  43. asdduke Avatar

    Thanks for sharing cool customization tweaks ! i was stucked @ featured post !

  44. naveen Kumar Singh Avatar

    Thanks for sharing such a nice article.

  45. Rohit Avatar

    Thanx for sharing.it helped me lot

  46. vamsi Avatar
    vamsi

    even if i removed the line that is header position: fixed. still it is not going

    1. wbxpress Avatar
      wbxpress

      refresh your browser cache.

  47. Akash Avatar

    plz explan where i paste no.12 and no.13 codes?

  48. sahid Avatar

    thank you for sharing amazing websiet

  49. My Daily Gadget Avatar

    Even I am using Eleven40 Pro theme on my blog, but I am facing problem in making articles look like a list.

    The first post is appearing in grid. Can you please help ?

    Regards

  50. Ankan Avatar

    Thanks. Finally I did the customization

  51. trendingapks Avatar

    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

    1. Varsha singh Avatar

      Thank you for such a great article. Please keep up this good work.

  52. Raj Avatar
    Raj

    I think my friend use this theme of his website, please someone check and tell me what theme he is using, his blog is https://www.androidterritory.com/ please some1 tell me,

  53. Techwebsites Avatar

    plz provided your theme css code becouze i love your theme style

    1. wbxpress Avatar
      wbxpress

      thank you. you can get the theme from this link: https://wbxpress.net/themes/

  54. edward Avatar

    You can also customize the mobile menu using wpr menu plugin.

  55. Alex Avatar

    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.

  56. Kairy Avatar

    Thanks for sharing awesome tips for eleven40 pro theme. I will apply above customization for my blog.

  57. Rohan Avatar

    Hello admin,
    I tried few customization. And it helped me a lot.

    Can you please help me with fixing the navbar.

  58. Satish Avatar
    Satish

    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.

    1. wbxpress Avatar
      wbxpress

      I just checked the latest version of eleven40-pro theme and the home.php file exists. You need to rename home.php

      https://wbxpress.net/wp-content/uploads/eleven40-pro.jpg

  59. Narang Avatar
    Narang

    The sticky header and extra margin space removal method is not working

  60. Venkat Avatar

    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.

  61. Martin Blox Avatar

    Hey, Im Getting Issues in Homepage, Post Showing in Grid Mode when i’m remaning home-old.php so it is showing whole post content on homepage please help me 🙂

  62. lucky patcher apk Avatar

    hey can you help me edit eleven 40 pro theme footer i cannot able to edit on my site ..

  63. Armaan Sharma Avatar

    Hey, Bro, Can You Send Me the All Custom codes Like This Site https://xtremetricks.net Which You Made I Use All your Codes But It didn’t Look Likes Your Website This is my website
    (https://freeandroidtricks.com/) Can You Help.

  64. Alisha Ross Avatar

    You oսght tо take part in a contеst fօr one of the best websites
    on the net. I moѕt certaіnly will highly recommend this web site!

  65. Suraj Kadam Avatar

    Can you please share the latest version?

  66. Yogesh singh Avatar
    Yogesh singh

    Nice article,
    wbxpress is the best website for website related queries.

  67. Sourabh Biswas Avatar
    Sourabh Biswas

    Thank you for this info keep share with us

  68. mimi roy Avatar

    I really love this web page here i get lots of info that make me smarter,,

  69. Radhe Avatar
    Radhe

    Thank you brother. My site is now good all because of you.
    Love you 🙂

  70. danish choudhary Avatar

    I tried few customization. And it helped me a lot.Thanks a lot admin!!

  71. Priya Agarwal Avatar

    sir, how can I change the sidebar title’s heading color?
    I didn’t find perfect way to do that.

  72. Ruhul Avatar

    This is so much helpful.

  73. Kishore Avatar

    Thank you for your tutorial. Can you pls explain how to customize menu in eleven40 pro theme?
    Expecting quick replay….

Leave a Reply

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