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
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.
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.
Amazing… will be trying this tutorial which font you are using in your site?
Thanks for your comment.
Fonts used: Montserrat and Neuton.
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/
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
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…
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
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.
https://www.alltechbuzz.net/atb-style-eleven40-wordpress-template-for-blogger/
This link certainly help you
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?
you should try second option.
Can you share us a guide in which showing how to use Google font without any plugin in our site?
Okay. I will write a post for you today. Please check after an hour.
check this: https://wbxpress.net/use-google-font-genesis-theme/
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
I have edited the Theme have a look at my site theme once https://xtremetricks.net
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.
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?
please check this: https://wbxpress.net/no-need-seo-plugin-genesis-theme/
Help me also bro in editing.. Can u send style.css code to me please..
Can you please send the style.css to me too? My email id is dksvishen@gmail.com
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 🙂
i have checked your site. it is beautiful now. your site speed is excellent. great job.
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?
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?
Bro email me style.css code to me @ pavankumarsake1@gmail.com bro..
Thanks
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.
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.
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
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.
This was help full. Succesfully Removed fully lenght post on home page.
Thanks this helped me a lot.
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
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.
What a great tutorial. Thanku so much bro for this great article
Thank you for your appreciation
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?
Which theme you are using? Try filling manual excerpt before publishing post.
Any other way possible to remove grid view?
Yes! login to you cPanel – File manager – Wp Content – Themes – eleven40 – rename Home.php to Home-old.php… Done!
please tell me theme name which you are using
it is a custom theme. https://wbxpress.net/themes/
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.
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?
It seems home.php is not in latest versions. I am still looking for that.
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?
Sure. Please ask which is one is not working.
It is amazing article to editing eleven-40 pro theme and thanks for sharing
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
Open functions.php file and remove the following line:-
thanks a lot . without your help i was unable to customize my blog. again thanks dude.
you are most welcome bro.
How to design the site title like a logo in the eleven 40 pro theme.
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/
awesome detailed guide for begginers!!
thanks for sharing!!
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
Awesome explain very halpfull to new people
disabling sticky header not working how to fix
How to remove the tags from the home page
Thanks i Just Remove Grid HomePage Section. Now Site Looking Good. Thanks for It
Love your Guide. It helps me a lot, and now I edited my site like a pro.
thank you for commenting.
thank you nice article. http://bloggingcraft.com/
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 !
Nice Blog Also !
I really thanks you !
Very helpful article for me !
Can you please help me how to add full width menu above header
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 ??
How to add google font directly?
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
I really thanks you !
Very helpful article for me !
I was messing up with that long post on homepage !
bro how can i change sidebar title’s heading?
I didn’t find perfect way to do that.
you need to change style of .widget-title.
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?
please check this: https://wbxpress.net/use-google-font-genesis-theme/
nice post … will be trying this tutorial for my blog !
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 !
thank you for your kind words.
Wow, AMAZING GUIDELINES! Thanks
Thanks for sharing cool customization tweaks ! i was stucked @ featured post !
Thanks for sharing such a nice article.
Thanx for sharing.it helped me lot
even if i removed the line that is header position: fixed. still it is not going
refresh your browser cache.
plz explan where i paste no.12 and no.13 codes?
great website
thank you for sharing amazing websiet
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
Thanks. Finally I did the customization
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
Thank you for such a great article. Please keep up this good work.
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,
plz provided your theme css code becouze i love your theme style
thank you. you can get the theme from this link: https://wbxpress.net/themes/
You can also customize the mobile menu using wpr menu plugin.
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.
Thanks for sharing awesome tips for eleven40 pro theme. I will apply above customization for my blog.
Hello admin,
I tried few customization. And it helped me a lot.
Can you please help me with fixing the navbar.
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.
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
The sticky header and extra margin space removal method is not working
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.
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 🙂
hey can you help me edit eleven 40 pro theme footer i cannot able to edit on my site ..
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.