wordpress

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

  • Add Login / Logout Link at the Footer of your WordPress powered Website

    Here in this example we used GeneratePress theme.

    Site Footer Before Customization:

    Site Footer After Customization:

    Edit the footer.php file
    (For GeneratePress theme the path is /wp-content/themes/generatepress/inc/structure/footer.php)

    Before:

    After:

  • To display all categories in a single post or page, add the following code into functions.php:

    Usage: Now create a page and the add the following shortcode: [categories]

  • Add Widgets in Front Page of Genesis Theme

    ·

    We have earlier shared “How to Add Widgets to Homepage of Genesis theme“. Now we are sharing a similar guide, “how to add widgets in frontpage of any genesis theme” so that it become a magazine theme.

    There are three steps as usual.

    Step 1: To add code in functions.php
    Step 2: To create a front-page.php file
    Step 3: To add code in style.css

    Step 1: Add the following code into functions.php

    Step 2: Create front-page.php

    Step 3: Add the following codes into style.css

    Inside the media query of style.css add the following code:

    That’s it. Now you will get a magazine style homepage as follows:

    front-page
  • Move Footer Menu below Site Header in Genesis

    ·

    This guide is applicable for Genesis Sample theme > 2.9. For older version check this tutorial.

    By default the Secondary Menu in Genesis Sample theme is placed inside Footer section. To relocate this menu to below the site header we need to follow the steps as mentioned below:-

    Step 1: Open /themes/genesis-sample/config/menus.php and change the text as follows.

    return array(
    'primary' => ( 'Header Menu', 'genesis-sample' ), 'secondary' => ( 'Secondary Navigation', 'genesis-sample' ),
    );

    Step 2: Delete the following from /themes/genesis-sample/functions.php

    // Repositions the secondary navigation menu.
    remove_action( 'genesis_after_header', 'genesis_do_subnav' );
    add_action( 'genesis_footer', 'genesis_do_subnav', 10 );

    Step 3: Edit Responsive menu settings from functions.php

    $settings = array(
    'mainMenu' => ( 'Menu', 'genesis-sample' ), 'menuIconClass' => 'dashicons-before dashicons-menu', 'subMenu' => ( 'Submenu', 'genesis-sample' ),
    'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
    'menuClasses' => array(
    'combine' => array(
    '.nav-primary',
    '.nav-secondary',
    ),
    'others' => array(),
    ),
    );

    Step 4: In /themes/genesis-sample/js/genesis-sample.js change the following line

    $( '.site-inner' ).css( 'margin-top', siteInnerMarginTop );
    into

    $( '.nav-secondary' ).css( 'margin-top', siteInnerMarginTop );

    Step 5: In /themes/genesis-sample/style.css inside the media query change the following:

     
    .site-inner {
    margin-top: 70px;
    max-width: 1140px;
    }

    to

    .site-inner {
    margin-top: 0;
    max-width: 1140px;
    }

    Step 6: In /themes/genesis-sample/style.css change the following:

    /* Footer Menu
    --------------------------------------------- */
    .nav-secondary {
    margin-top: 10px;
    }
    .nav-secondary .genesis-nav-menu {
    line-height: 1.5;
    }
    .nav-secondary .menu-item {
    display: inline-block;
    }
    .nav-secondary a {
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
    }
    to

    /* Secondary Navigation
    --------------------------------------------- */
    .nav-secondary {
    clear: left;
    padding: 15px 0;
    background-color: #eee;
    width: 100%;
    }
    .nav-secondary .menu-item {
    display: inline-block;
    }
    .nav-secondary a {
    padding: 10px 15px;
    color: #333;
    }

    Step 7: In /themes/genesis-sample/style.css inside the media query add the following:

    .nav-secondary .wrap {
    max-width: 960px;
    margin: 0 auto;
    }

    That’s it.

  • Add the following code inside the Genesis theme functions.php file:-

    That’s all.

  • Earlier we used to cache our wordpress sites using PHP-FPM technology. We have a tutorial for this: FastCGI Caching with Nginx on VPS for WordPress

    Now, we cache our sites in a simpler and better method. We use a wordpress plugin named Simple Cache. And we shall order Nginx server to serve the cached content bypassing the database query and PHP. Here are the steps:

    Step 1. Install and Activate the plugin Simple Cache.

    Step 2: Add the following into wp-config.php if the plugin can’t do it for you.

    define('WP_CACHE', TRUE);

    Step 3: Edit virtual host file. e.g.

    sudo nano /etc/nginx/sites-available/wbxpress.conf

    Replace the following line inside location / block:

    try_files $uri $uri/ /index.php?$args;

    By

    try_files "wp-content/cache/simple-cache/${http_host}${request_uri}index.html" $uri $uri/ /index.php?$args;

    Restart nginx server using the command.

    sudo service nginx restart;

    Step 4: Now turn on the caching.

    Turn On Caching

    That’s it. Now you have a fast loading site.

    before caching
    after caching