Categories
blog

Add Google Fonts to WordPress.

You can add Google Fonts to your WordPress site in under one minute. One minute to create a unique branding for your WordPress website. Why would you not do it?

Using Google Fonts can give your site a customized look. In addition, fonts loaded from there will be faster than using self-hosted font files. Sometimes self-hosted fonts take the longest time to download by the browser. Fonts loaded from Google’s Content Delivery network (popularly known as CDN) will eliminate requests from your own server and also decrease latency on your server.

To use Google Fonts on your WordPress website, add the following to functions.php in your theme.
Remember to change the font with the font you want to use.


function load_fonts() {
wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=font');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_enqueue_scripts', 'load_fonts');

Categories
blog

Rem font sizes instead of pixels or ems.

Rem font sizes are the best way to do font sizing for responsive web design.Rem stands for “root em”

There are many units that can be used for font sizing: pixels(which is the traditional and most popular way of doing things), ems and rems. Both ems and rem have come to the forefront as they are great for responsive web design, where as pixels are not. Rem, however differs from em as it is based on the root element. what this means is that the it is relative to the root em of the entire website. Unlike em, which is relative to the parent element.

First we will set our base font size for rem font sizes to 62.5%. This will make 1rem = 10px, allowing for easier calculations. Using a base size of 100% would make 1rem = 16px. Feel free to adjust it whichever way makes more sense to you.

Add this code to your stylesheet.

html { font-size: 62.5%; }

Now, if we want our body font-size to be equal to 24px, we set it to 2.4rem.
To make our h1 equal to 30px, we set it to 3rem.
You can set the font-size of any element the same way.

Add the following code to your css, after you have added the first bit of code.

body { font-size: 2.4rem; }
h1 { font-size: 3rem; }

One of the main advantages of using rem lies in the fact that you only need to change the font-size under the html element in your respective media queries to change all the font-sizes. This allows your font-sizes to scale in different resolutions. You do not need to change the font-size in every single element.

The following code increases all the rem font sizes for resolutions above 600 pixels by a single line of code.

@media (min-width: 60rem){
html{
font-size:0.5rem;
}
}

Categories
blog

WordPress Scheduled Posts.

WordPress Scheduled Posts for numerous reasons. They allow you to target the best times for publishing your posts or having a consistency in adding new posts.

To schedule posts in WordPress:

  1. Select the post you want to schedule.
  2. In the “Publish” panel, click “Edit” beside “Publish” option.
  3. Choose the date and time for when you want to schedule the post to be published and click “Ok”. The time is in 24 hour time, so. 1:00 AM is 01:00 and 1:00 PM is 13:00.
Categories
blog

Enable gzip using htaccess.

Enabling gzip allows compression of HTML,CSS and other specified files. This saves a lot of file size, saving bandwidth as a result. When your site requires less bandwidth, it will load faster.

To enable gzip you must add the following lines of code to your .htaccess file.



AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json

Categories
blog

WordPress 4: New features & updates.

WordPress 4 is named “Benny” in honor of jazz clarinetist and bandleader Benny Goodman. It is not a major update in terms of features and functionality. However, it streamlines and improves WordPress.

New features & updates include:

  1. Embedding URLs now has previews. Accessible in both the visual editor and the Insert from URL tab. To add a URL in the visual editor, just add the link on a new line.
  2. Better Content Editing. The content editor intelligently re-sizes as needed. Keyboard and cursor interactions have been updated in TinyMCE.
  3. New accessibility features. The Add Media panel and links in the help tabs are now keyboard accessible. Screen reader support has been added for the Customizer and widgets.
  4. Better plugin installation experience. More information and details when searching and installing plugins, including thumbnail images.
  5. Language choice during installation.
  6. Media Library has a new grid view. Grid view displays additional details on clicking an item.
  7. Widgets now get their own panels within the Customizer.
Categories
blog

WordPress function to load jQuery from Google’s CDN.

Loading jQuery using Google’s Content Delivery Network(CDN) will lead to decreased latency, meaning faster load time for your site. Using this method eliminates a request from your server. In some cases the user may already have the exact version of jQuery cached from Google’s CDN, meaning they do not need to download it again. However, if you host jQuery locally from your site, the user must download it, even if it is the same version.

To load jQuery from Google’s CDN, add the following to your functions.php file in your theme.
Remember to change the version of jQuery with the version you want.


function load_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'load_jquery');

Categories
blog

Enable keep alive using htaccess.

Keep alive is communication between the server and the browser that allows getting more than one file.
Without keep alive enabled, it takes more time to download the page.
Enabling keep alive allows for faster downloads of webpages.


To enable keep alive you must add the following code to your .htaccess file.



Header set Connection keep-alive

Categories
blog

Easiest way to update URLs in WordPress.

  1. Install Velvet Blues Update URLs. Activate it.
  2. Go to the plugin and select Update URLs.
  3. Enter the URL you would like to change in old URL. Enter the URL you would like it changed to in new URL.
  4. Choose the places in which the URLs should be updated. Click  Update.