Archive for the ‘Tutorials’ Category

A tutorial on How to Create WordPress Child Theme

Sunday, April 22nd, 2018

WordPress provides numerous themes to help the users. Besides, you can customize the themes to make it more palatable according to your needs. However, being a WordPress user, you must know how frequently you get updates on your theme. As soon as you update the theme, you will notice that all the changes you have done so far in your current theme are gone. Not updating your theme is not a good option too. Keeping your site away from updates also invites bugs and even hackers. That is when child themes come to rescue. A child theme is an identical theme of the parent theme.

Therefore, even if the parent theme is updated, you can still use your customized theme without compromising the security of your site. With a child theme, you can edit the CSS Stylesheet, PHP template, functions.php files along with image and JavaScript. Whether you are a coder or a designer, you can make changes in your WordPress with ease.

Advantages of Child Theme

Speed up development

A child theme is just an identical copy of parent theme such as its style, templates, and files. Therefore, you do not have to create a new theme from the start. With a child theme, you can make substantial changes in your theme without affecting the parent theme, which saves you a lot of unnecessary re-coding, and helps you to achieve your target sooner. Also, while coding in a child theme, if you forget to code for something, then you can always resort back to the functionality of parent’s theme.

Avoid any damage to your website

Skipping an update in your parent themes is dangerous. WordPress keeps updating its themes to increase the safety of your website and to fix an annoying bug. You will never know where you may land if you avoid any updates. With a child theme, you can retain all your parent’s theme modification and changes separately and update your parent themes without having to worry about losing your modification.

Usually, any update made to the theme gets waived away once the developer makes any modification to it. So, as a user, you may feel disheartened when your customized applications will be gone. However, you can simply avoid this by going for a child theme. You can make n-number of changes to the website without interfering with the theme.

Let’s know how to set up a basic child theme

Though, it can be done directly from the server; it is recommended to set-up everything locally followed by installing it as a normal theme by using the “Theme” menu. The whole process will be a hassle-free affair.

Create a folder

As a first step, you need to create a new folder for your child theme. You can get the theme inside the WordPress at location “wp-content/themes.” Give it a name similar to your parent theme and attach “-child” at last for easy recognition. Use any name you want but make sure it does not have any space in between.

Style Sheet

The design of the entire website depends on the code that is present inside the Style Sheet. Create a new text file and name it “style.css”. Then you have to paste the “stylesheet header” code at the beginning of the file.

Some terminologies may confuse you.

  • Theme Name: This is the prima facie that will represent your theme in the WordPress.
  • Theme URI: A Theme URI or an Author URI is important to make your theme get accepted in the WordPress theme directory. It represents the demonstration theme.
  • Description: It will show up when you will click on the theme menu.
  • Author: It’s no one but you, the creator of the theme itself.
  • Author URI: This contains the name of your website. You can put it here as optional.
  • Template: It is nothing but the folder name. As it is case-sensitive, you have to be little cautious. Otherwise, you will end up getting an error message.
  • Version: If you are getting started with your child theme, it will show up as 1.0 and will increase progressively with the number of upgradation your child theme takes.
  • License: WordPress themes get released under GPL license, and you shouldn’t change that for any reason.
  • Tags: These are relevant keywords that best describe your WordPress theme and help it getting visibility during search engine.

Activation

Before activation, you need your folder and style sheet to be ready with you. Once you have them by your side, go to the “themes” present under the “Appearance” section. Then click on the “Theme details,” and you will get the stylesheet header over there. Now, one last job is to click on the “Activate” button and you are done!

Few More things to do

Now the next step is to create the “functions.php” file as it will determine the look and behaviour of your website. The task is not hard; you have to paste the text “function.php” into the following code; 

<?php

//*Code goes here

As of now, the website will look more like a text type as you are using a parent theme. It’s time to inherit the information from that parent theme. All you have to do is to copy the code “@import url (“../twentyfifteen/style.css”)” into your “style.css” section of the child theme. The old way of copying several stylesheets will only make your website run slow.

Have we inserted theme image yet? Again, adding theme image is not a hard task either. Choose a big image of size 880 × 660 pixels, although it will be shown as 387 × 290. Go for a PNG image over JPEG and GIF. Name that image as “screenshot.png” and place it into your child theme folder.

Now, one question may strike your mind. Do you need to make a child theme every time your WordPress website demands a change? Actually, it depends. If the change you require is regarding colour or font size, go for a “custom CSS plugin” but if you have big changes in mind related to templates or anything in that magnitude, go for a child theme for sure without giving any second thought.

10 Useful CSS3 jQuery Animated Icon Tutorials

Friday, October 3rd, 2014

If you want to learn how to animate icon then you’ll find below list of tutorials useful. All of these tutorials are very useful and some can even be used as Javascript alternatives. So in this article we’ve share 10 useful css3 jquery animated icon tutorials that teach you how you can use CSS, SVG and jQuery to make your website more attractive. We hope you’ll find our useful css3 jquery animated icon tutorials collection useful. And please comment below if you have or know any useful css3 jquery animated icon tutorials.

Useful CSS3 jQuery Animated Icon Tutorials

20 Useful CSS3 Hover Effects Tutorials 2014

Wednesday, July 16th, 2014

Here’s a collection of useful CSS3 hover effects tutorials. All of these CSS3 hover effects tutorials have creative fun animation effects.

HTML5 and CSS3 Expanded the possibilities of Web Design, lots of new properties has been introduced to help you make rich websites. In this article, I have shared 20 css3 hover effects tutorials to help you to make your website rich and getting better user experience. This article shows with CSS3 animation properties you can create creative hover effects without too much effort. We hope you’ll find our fresh and useful CSS3 hover effects tutorials collection useful and please comment below if you have or know any CSS3 hover effects tutorials.

CSS3 Hover Effects Tutorials 2014

  • Hover Effect Ideas
    Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.
  • ARROW NAVIGATION STYLES
    Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.
  • Hover-Friendly Hexagons
    On one of my recent web projects part of my design included a hexagonal grid of images. The design involved being able to hover over the images to reveal a description.
  • Display Images with Shape Masking and Nifty Zoom Effect
    This tutorial will be using CSS3 transform which means, old browsers will not show the zooming effect. Good news is, I have coded it, even if it’s old browsers, it will still look pretty good and usable.
  • How to Create Five Simple Hover Effects for Your Navigation Links
    This is a quick tutorial about creating simple css3 hover effects tutorials that would be best suited for links within a navigation.
  • Create Attractive Animated Hover Effects Easily
    CSS3 hover effects tutorials will show you how to make attractive hover effect for thumbnail images. By using already-made CSS3 animation library, you too can create cool animation effects easily.
  • Create Different Styles of Hover Effects with CSS3 Only
    This CSS3 hover effects tutorials will show you how to make simple and elegant hover effect for thumbnail image. Basically, it will show extra bit of information when you hover over the images.
  • Tile transition effects
    A tutorial about different effects on tiles, showing hidden link on hovering.
  • Uniqlo Stripe Hovers
    A tutorial about how to create animated stripes that reveal on hover over promotional boxes.
  • 3D THUMBNAIL HOVER EFFECTS
    A tutorial about how to create 3D thumbnail css3 hover hover effects tutorials with 3D transforms and jQuery.
  • CIRCLE HOVER EFFECTS WITH CSS TRANSITIONS
    A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations.
  • STICKY CAPTIONS CONCEPT
    A little trick on how to make captions of thumbnails or items “sticky” in order to stay visible in the window or viewport.
  • CREATIVE BUTTON STYLES
    Some creative and modern button styles and effects for your inspiration.
  • SIMPLE ICON HOVER EFFECTS
    A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
  • ANIMATED OPENING TYPE
    A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.
  • CREATIVE LINK EFFECTS
    An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.
  • CREATING A BORDER ANIMATION EFFECT WITH SVG AND CSS
    The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.
  • SHAPE HOVER EFFECT WITH SVG
    In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.