Customization in WordPress

Currently, WordPress is the widely used Content Management System in the world and is being utilized by nearly 75 million websites. Here I am trying to bring in front of you few primary customization required while you are developing your website in WordPress.

How to make custom widget area?

To make custom widget area, you need to write following code in your functions.php file which could be either in parent/child theme.

Code for functions.php:

register_sidebar(array(
        'id' => 'widget-id',     
        'name' => 'widget name',
        'description' => 'description',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>',
));

Code to be written in php file where you want to display the content of the created widget:

<?php dynamic_sidebar('widget-id'); ?>

How to allow php code in widget?

To allow php code in widget you need to add following code into your function file i.e functions.php

Code:

function execute_php($html){
     if(strpos($html,"<"."?php")!==false){ ob_start(); eval("?".">".$html);
          $html=ob_get_contents();
          ob_end_clean();
     }
     return $html;
}
add_filter('widget_text','execute_php',100);

How to enable shortcode in widget?

To enable shortcode in widget you need to write below code in your functions.php file.

Code:

add_filter('widget_text', 'do_shortcode');

How to create custom menu?

To create custom menu in wordpress follow the below steps.

You need to write the below code in function file:

function my_custom_menus() {
    register_nav_menus(
            array(
                    'footer-menu' => __( 'Footer Menu' )
            )
    );
}
add_action( 'init', 'my_custom_menus' );

Write the below code in php file where you want to display the custom menu.

How to limit the length of the excerpt and change the by default read more excerpt string i.e […]?

You need to write the following code into your function file.

Code to limit the length of excerpt is as below:

function custom_excerpt_length( $length ) {
    return 30;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

Code to change the read more excerpt string is as below:

function wpdocs_excerpt_more( $more ) {
    return '...';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );

How to include your parent theme’s stylesheet into child theme?

There are two ways we can include to do this:

1. You need to write below code into your child theme’s stylesheet.
   

   @import url("../your-theme-name/style.css");

2. You need to write the below mention code into your function file of the child theme.
   

   add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
         function enqueue_parent_styles() {
         wp_enqueue_style( 'parent-style',   get_template_directory_uri().'/style.css');
   }

Second method is more preferable than first method as in first one all the css that are included will be downloaded consecutively which will reduce the page speed.

How to change admin login logo?

To change the admin login logo write below code into your function file of child theme.

/* Change the admin login logo */
function login_logo() {
    ?>
<style type="text/css">
    body.login div#login h1 a { background-image: url(your_login_logo_path_url) !important; background-size: contain; width: auto;}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'login_logo' );
?>

How to set featured image as background?

In most of the cases when we set the featured image in post/page, it is generally displayed as image but many time we require to set the same image as background. You need to write the below code in the template file of the page. In the example here, I have used this to display it on blog single page and for that I have made a copy of single.php into child theme.

Code added to single.php

<?php if(has_post_thumbnail()) {
        $post_thumbnail_id = get_post_thumbnail_id($post->ID);
        $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );
    ?>    
<div class="featured-img-bg" style="background-image: url('<?php echo $post_thumbnail_url?>');"></div>
    <?php }?>

Code added to Stylesheet:

.featured-img-bg   { padding: 300px auto; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat;} 
/* height of the background here will be 600px; */