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 · [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.
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.