E-motahar

Why should Speed Up Your Website?

There are so many important reasons to speed up your site. One is that Google cares about it. If your site is speedy enough your rank will high on search results. So if your site is not speedy enough I will not get new visitors. And another main reason is that when your existing visitors visit your site if they get it as loading….. loading….. you will lose them soon. These two reasons are enough for taking care of your site’s speed up. How to check the website speed? Use the sites to check speed. They are reliable but don’t over trust them. Use the actual devices.

1. Gtmetirx.com
2. tools.pingdom.com/
3. Google

So how to Speed Up Your Website?

I said easily. So it will be easier. I will suggest some manual works to ensure the result & also use some plugin. Just follow these steps.

Minify All CSS & JS files

Check your .css & .js files on your theme. If they are minified then okay, otherwise minify them. There are many websites that help to minify the files. Just search for them.

And use asynchronous files.

Reduce the HTTP Requests Number

Combine your all .css files to one & all .js files to one. But now you have to be a little careful about that everything on your site is working fine. I will suggest you do it one by one. Create a new file & put one file & check the site. If any file creates any problem just skip it & call it as a single file. Here you should care about the priority of the files.

Optimize the Images

Optimize the images manually. You can use online tools. Tinypng.com is a nice one.

Here one thing, when you test on google page speed insight, they will suggest the optimized images. Be careful to take these images. Google gives the images only for the single page which you are testing. If the images are used on other pages with different sizes it will create the problem. And also sometimes it decreases the quality to too low and sometimes doesn’t count the images that could be optimized.

Don’t use a large-sized image that you don’t need. Change the image size as you need on webpages & then optimize.

Gzip Compression

We will use the w3 Total Cache plugin. It cares about Gzip compression. But sometimes it may not work. Use the code below the compress the text. Add the snippet to your .htaccess file on the Apache server.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Or if you are on NGINX add this snippet to Nginx.conf :

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Browser Caching :

Use any good caching plugin. If you are not using the w3 Total Cache plugin I will suggest it. It has many features that work fine active installation 1+ million & 26k+ 5 star review. There is an option for Gzip compression.

Lazy Load :

Use a lazy loader plugin. It will decrease the page loading size extremely. How does it work? When you will load the page, it will not load the full page. It will load only the visible part of the screen. When the visitor will scroll down, it will load the relevant part. You can you BJ Lazy Load plugin.

Use CDN Service :

Content Delivery Network( CDN ) will do a lot of work for you. If you need a high-speed website from all over the world, don’t forget to use the CDN service. The site testing tools may show you the high speed of your website, but the actual user experiences can not reflect all over the world.

The CDN service will serve your content from their different networks across the world. There is a free feature on Cloudflare. But as far I know the recent experience is not so good. So you should choose a premium one. There is many CDN service provider. Just make search & choose the best one which matches your budget.

More Thoughts for Speeding Up Your Website :

If your main server is too poor, you may need to change it to a better one to speed up your website.

If you think you need help to speed up your website feel free to contact me. I will assist you with my experiences & skills. First I will find the problem with your website and then will solve the problem.

Service Fee: Only $60

What is a widget in WordPress?

WordPress widgets are the combination of some code which is made for a specific purpose but use dynamically. You can create a custom widget in WordPress & display in different places of your theme. WordPress provides many default widgets. To view them go to admin dashboard Appearance >> Widgets. You will see here Archives, Calendar, Categories, Meta, and many more. These are the WordPress default widget. You can use them on your sidebar. If your theme doesn’t have sidebar you have to create it. It’s very easy. I will show later.

How to Create a Custom Widget?

Sometimes we may need to create our own widget & display them with our own styles. For this purpose, WordPress provides Widgets API to create custom widget. To follow the official documentation follow this link. Here let’s see how to create a custom widget.

class em_custome_Widget extends WP_Widget {

    public function __construct() {
        // Here the actual widget processes
    }

    public function form( $instance ) {
        // Here codes for taking the inputs from admin widget area
    }

    public function update( $new_instance, $old_instance ) {
        // Here codes for saving the data to database which was taken from the upper section
    }

    public function widget( $args, $instance ) {
        // Here codes for displaying the outputs on your theme
    }

}

This code creates the widget but it is still not registered. So it needs to be registered. Here we need to use ‘widgets_init’ action hook.

function em_custom_widgets_register() {
  register_widget( 'em_custome_Widget' );
}
add_action( 'widgets_init', 'em_custom_widgets_register' );
If want to create your own sidebar for displaying the widget to a specific location you will need to create your own sidebar. Paste this snippet to your functions.php.

  function em_custom_sidebar($id){
    register_sidebar(array(
      'name' => 'Your Sidebar',
      'id' => 'sidebar',
      'before_widget' => '<div class="block side-widget">',
      'after_widget' => '</div>',
      'before_title' => '<h3>',
      'after_title' => '</h3>'
    ));    
  }
  add_action('widgets_init', 'em_custom_sidebar');

Custom Recent Posts Widget :

Let’s think we need to create our own recent posts widget and style it as we want.

class em_Widget_Recent_Posts extends WP_Widget {

  /**
   * Sets up a new Recent Posts widget instance.
   */
  public function __construct() {
    $widget_ops = array(
      'classname' => 'em_widget_recent_entries',
      'description' => __( 'Your site’s most recent Posts.' ),
      'customize_selective_refresh' => true,
    );
    parent::__construct(
      'em_recent_post_id', // Base ID
      __( 'EM Recent Posts', 'em_recent_post_widget' ), // Name
      array( 'description' => __( ' &  visitors will calculate the total cost.', 'em_cost_calculator_widget' ), ) // Args
    );
  }

  /**
   * Outputs the settings form for the Recent Posts widget.
   */
  public function form( $instance ) {
    $title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
    $number    = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
    $show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
?>
    <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>

    <p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
    <input class="tiny-text" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" step="1" min="1" value="<?php echo $number; ?>" size="3" /></p>

    <p><input class="checkbox" type="checkbox"<?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
    <label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
<?php
  }

  /**
   * Handles updating the settings for the current Recent Posts widget instance.
   */
  public function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['title'] = sanitize_text_field( $new_instance['title'] );
    $instance['number'] = (int) $new_instance['number'];
    $instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
    return $instance;
  }

  /**
   * Outputs the content for the current Recent Posts widget instance.
        */
  public function widget( $args, $instance ) {
    if ( ! isset( $args['widget_id'] ) ) {
      $args['widget_id'] = $this->id;
    }

    $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( '' );

    /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
    $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

    $number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 3;
    if ( ! $number ) {
      $number = 3;
    }
    $show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;

    /**
     * Filters the arguments for the Recent Posts widget.
                */
    $r = new WP_Query( apply_filters( 'widget_posts_args', array(
      'posts_per_page'      => $number,
      'no_found_rows'       => true,
      'post_status'         => 'publish',
      'ignore_sticky_posts' => true,
    ), $instance ) );

    if ( ! $r->have_posts() ) {
      return;
    }
    ?>

      <div class="lpost">
        <div class="side-tit">
          <h6 class="ctit">
            <?php
              if ( $title ) {
                echo  $title;
              }
            ?>
          </h6>
        </div>
        <?php foreach ( $r->posts as $recent_post ) : ?>
          <?php
          $post_title = get_the_title( $recent_post->ID );
          $title      = ( ! empty( $post_title ) ) ? $post_title : __( '(no title)' );

          $em_post_thumb = get_the_post_thumbnail( $recent_post->ID );
          $em_thumbnail      = ( ! empty( $em_post_thumb ) ) ? $em_post_thumb : __( '(no title)' );
          ?>
        <div class="item">
          <a href="<?php the_permalink( $recent_post->ID ); ?>">
            <div class="sm-img">
              <?php echo $em_thumbnail ; ?>
            </div>
            <div class="info">
              <h5><?php echo $title ; ?></h5>
              <?php if ( $show_date ) : ?>
                <span><?php echo get_the_date( '', $recent_post->ID ); ?></span>
              <?php endif; ?>

            </div>
          </a>
        </div>    
        <?php endforeach; ?>                
      </div>

    <?php
    echo $args['after_widget'];
  }

}
function emotahar_recent_post_widgets() {
  register_widget( 'em_Widget_Recent_Posts' );
}
add_action( 'widgets_init', 'emotahar_recent_post_widgets' );

This will show on your widget like this :

Add your CSS for your own styling.

I added my styling.

That’s it. You have created a custom widget in WordPress Thank you.