[ Laszlo Porkolab ]

Here’s a simple solution to setup WordPress HTTPS without any third party plugin:

1. 1. Install your SSL certificate. Most cases your host provider has free SSL so you can activate in your cpanel.
   2. Update your website’s address. Replace http:// with https:// in WordPress Settings/General menu.
   3. Editing your .htaccess file. Navigate to public_html folder to edit your .htaccess file. Insert this rules into your file, and save:

RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

1. 1. Fixing mixed content warnings. If you get mixed contet warning message from your browser add this line to the top of your .htaccess file:

Header always set Content-Security-Policy: upgrade-insecure-requests

1. Done. Now your site use HTTPS protocol.

There are many interesting “must-have” web design tool available on the internet, I tried to collect my favorite typography tools:

1. Type Scale is a great visual font size calculator, helps to set your typography correctly.

2. Colorable helps to set the correct font and background color/contrast ratio of your site. You can generate correct font and background colors with this visual editor.

3. Golden Ratio Typography Calculator helps to “discover the perfect typography for your website by entering your current font size and content width.”

4. PX to EM calculator is great for px to em, em to px conversions, and you can learn more about pix, em, % and pt.

FitVids.js is a great jQuery plugin for fluid width video embeds. It also available in wordpress plugin, but I wanted to add manually into my theme. This tutorial is about how to add FitVids.js manually into your wordpress theme.

• download Fitvids.js from here
• upload “FitVids.js-master” folder into your theme’s js directory
• create a new file with name “FitVids.js” and copy this code:

(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });
  
  })(jQuery);

• you can replace “.post” with container name of your posts
• upload “FitVids.js” into your theme’s js folder
• copy and paste this code into your theme’s functions.php file:

wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE); 

wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);

Now you have responsive youtube and vimeo embeds. Here is a sample youtube video:

I started to use dFactory: Cookie Notice in my blog beacause of the EU cookie law regulations. This plugin is the easiest way to inform users about site cookie policy, the notification area is fully customizable you can change colors, text, button, appereance etc.

But an important feature is still missing from current version(1.2.37): add notification bar transparency. Fortunately I found the solution in support forum.

Insert this code into your theme’s style.css file:

#cookie-notice {
	background: rgba(0, 0, 0, 0.8) !important;
}

Now you can define different RGB colors with opacity.