How to create a custom slider using Slick Slider

Some of the time we can not see a wordpress plugin that is looks like the slider on the design so what I going to do is to create a custom slider one of my favorite slider is the slick slider. You can create a custom slider by following the steps below.

First we have to embed the necessary js and css file, you can download the files from here http://kenwheeler.github.io/slick or use a CDN version https://cdnjs.com/libraries/slick-carousel

Add this code to the

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Add this code before the tag, please remove the jquery library if you already have it in your website

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script>
$(document).ready(function(){
  $('.your-class').slick({
    // We can add the slider settings below this line
  });
});
</script>

Lastly, the html markup

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

When complete your html markup should be like this:

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

Disable Plugins By Any Post Type

The Plugin Organizer allows you to do the following:

  • Change the order that plugins load on your site
  • Selectively disable plugins by any post type or WordPress managed URL
  • Adds grouping to the plugins admin page.

Below is the step by step process to configure the plugin

  1. Click the button inside of the box titled “Selective Admin Plugin Loading” to set it to “On” and hit the “Save Settings” button.
  2. Click on Plugin Filters->Add Plugin Filter and enter the url of the admin page you want to disable plugins on in the permalink box and turn off the plugins you want disabled.
  3. If you want to affect all admin pages click on Settings->Plugin Organizer and select the Enable radio button under Fuzzy URL Matching. Then on the plugin filter select the checkbox for Also affect children

Adobe Photoshop’s Hidden Trick: Color Picker

Adobe Photoshop had so many features, shortcuts, etc. But this trick that I’ll show you maybe isn’t very known to all of us because it is unlikely being often use by the other users.

Maybe it will help you in your workflow so I guess I’ll show you 🙂

First, you must have an open canvass to do this trick. If you don’t have yet, just be sure to create one.

Then pick ‘Color Picker’ at the tool bar menu.

Then resize your Photoshop window to make it smaller. Resize it according to your preference. We need to resize it so we can see the portion of the background behind Photoshop app window. In my case the background behind my Adobe Photoshop window is my Google Chrome browser.

Then with the color picker tool selected, click on the canvass then hold+drag going outside the Adobe Photoshop window, point your color picker cursor to the color you want to pick/select. As you can see, a big circle near the picker will appear and will show the color which the picker is pointed at. If you can’t see the circle in your case, you can notice that the foreground color that is active at the bottom of your toolbar updates every time you move your cursor/picker to another color.

I hope this trick will help you a lot and can improve the way you work inside Adobe Photoshop. Thank you! 🙂

DNS Hosts File

Modifying your hosts file lets you view and test a site on one server while the rest continues to see the site on the original server. That makes it an essential tool when migrating your website.

Below is the simple process to do this.

  • First, find command prompt
  • Right-click on the cmd.exe icon.
  • Select Run as Administrator.
  • Enter the following command:
    notepad C:\Windows\System32\drivers\etc\hosts
  • Add the appropriate line at the end of your hosts file, then save and close the file.
  • Flush your DNS cache
  • Open an elevated command prompt as above, and enter the following command:
    ipconfig /flushdns

Create Starter Theme using underscore

Creating a wordpress theme from scratch is time consuming and not a bug free. So I prefer using a starter theme, one of the top wordpress starter theme today is Underscores they offer an easy to customize, FREE and bundled with necessary function Starter theme.

To Get started, just go https://underscores.me/ click the Advanced Option and fillup the field – https://www.screencast.com/t/doYiN6K8zR

Once you are done to fill up the fields you can click the generate button and it will provide you a theme archive containing all of the necessary files and templates to start developing your theme.