WBXPress.NET

wordpress

All about wordpress related tips and tricks, codes, snippets etc.

  • Create WordPress Site using Ultimate Member Plugin

    ·

    wbxpress

    WordPress site has built in feature for users. Users can register, they can login, they also can change their profile. That’s all. More control is not available in wordpress core feature.

    A plugin is available in wordpress repository which is called Ultimate Member. It can perform few good job:-

    1. Content Restriction: You can restrict content for particular group of users.
    2. User Role Manager: You can create new user role i.e. you can set different permission to users.
    3. Show user comments in their profile: Users can view all comments they made in their profile.
    4. Member Directory: You can create member directory through which users can view other’s profile.

    and lot more feature which your site members surely love.

    ultimate-member

    Check out this plugin: Ultimate Member

  • Sidebar Widget for Home and Single Post in Genesis

    ·

    wbxpress

    Genesis theme is the best theme framework in WordPress. Almost all child themes have a sidebar except single layout theme. We place widgets at the sidebar. All widgets appear in every pages. Now, what if we want to display a particular widget only in home page? Or what if we want to display a widget only in a single post page? In this tutorial we will create one sidebar widget area for home page only and another sidebar widget area for single post only.

    Create a Sidebar Widget Area for Home Page

    Add the following code in your genesis theme’s functions.php file.

    Create a Sidebar Widget Area for Single Post

    Add the following code in your genesis theme’s functions.php file.

    You may modify the above and use different conditional statement.

    Find the Conditional Statements from WordPress

  • Development of WordPress Theme – Start from Scratch

    ·

    wbxpress

    In this tutorial we will discuss how to develop wordpress theme for the beginners. Our main consideration is that the theme will be very simple, clean, responsive and fast loading. This theme may be used for text based websites. No graphics or javascript is used so that the theme may have a flying speed. Our theme will have the following sections:

    screenshot

    A full width header, content at the left side, a right sidebar for placing widgets, three footer widget areas and a footer credit section.

    Now let’s begin to develop the theme from the very beginning.

    Step 1: Create a theme folder (we named it as wbxpress-one) and create following blank files inside that folder.

    1. header.php
    2. index.php
    3. sidebar.php
    4. footer.php
    5. content.php
    6. content-none.php
    7. single.php
    8. comments.php
    9. functions.php
    10. style.css

    Step-2: Add the following code inside header.php

    Step-3: Add the following code inside index.php

    Step-4: Add the following code inside sidebar.php

    Step-5: Add the following code inside footer.php

    Step-6: Add the following code inside content.php

    Step-7: Add the following code inside content-none.php

    Step-8: Add the following code inside single.php

    Step-9: Add the following code inside comments.php

    Step-10: Add the following code inside functions.php

    Step-11: Add the following code inside style.css

    That’s all. You have a developed a full fledged theme which works great with latest wordpress software. So far we have concentrated only to the functioning of the theme but not to the looks of the theme.

    To achieve a great looking theme all we need is to edit style.css only. In next tutorial we will discuss how to change the look and feel of the theme. We will add style of every element of the theme so that it looks great in any browser, any device.

    By the way, you may download the above theme from this link.

    This theme displays full length post at home page. If you want to display only excerpt at home page you need to change the following code:-

    File content.php line no. 25

    the_content( __( 'Read more', 'wbxpress-one' ) );

    Replace the above code with the following

    the_excerpt();

  • Add Adsense in between Posts of Genesis Home Page

    ·

    wbxpress

    Adding Google Adsense Code in Genesis theme is very easy by using Simple Hook Plugin. Using this plugin one can insert adsense almost anywhere e.g. before or after of header, footer, post title, post content, post info, comment-box, sidebar etc.

    But what if you wish to add adsense in home page in between posts, for example, after each second post or third post. Simple hook plugin can not solve this.

    You need to create a widget area by editing your theme’s functions.php

    Add the following code inside functions.php

    You need to also add the following code in style.css for styling purpose

    .wbxp-google-ads {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

    Now you should see a widget in your theme Appearance->Widgets

    between-post-area-widget

    Add a Text Box in this widget and paste your Google Adsense code inside it. Now you should see adsense displayed in your home page after each second post. If you wish to add adsense after each third post, just change the value to 3

    $loop_counter == 3

  • Customizing Genesis eleven40-pro Theme

    ·

    wbxpress

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

  • Customizing Site Header of Genesis Child Theme

    ·

    wbxpress

    The most important part of an website is its header. It may contain site title, site description, website logo, header image, search box, advertisement or any other widget.

    The first impression comes from your viewer is the site header. This is the most visible part of your website. So, in our opinion site header should only consist of your site name. So that your viewers may recognize at anytime only seeing the site name. You are trying to memorize your audience only your site name which is easy for them. You may further remove site description if you have an about page somewhere in your home page. So, only site title in the site header looks elegant and have a deep impact upon your readers.

    1. Remove Site Description

    To remove site description in any genesis child theme, you should only add the following line of code at the end of your theme’s functions.php file.

    remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

    2. Choose appropriate font size, padding and margin values

    Edit theme’s style.css and change padding and margin values as shown below:

    /* Site Header */

.site-header {
	...
	padding-bottom: 20px;
	...
}
.site-title {
	font-size: 30px;
	...
	margin-bottom: 10px;
	margin-top: 30px;
}
.header-image .site-title {
	margin: 20px 0 0;
}

    Play with the above numbers in red to achieve best looking header.
    Dont forget to refresh your browser cache each time you update your theme style.css file.