Auto Added by WPeMatico

responsive_website_tutorial_preview_large

How to Make Website Responsive In About 15 Minutes

The buzz around responsive websites has been going on for a while now, and a lot of websites are already responsive, or underway. You know what that means?

Today I will teach you how to build a responsive website.

  • Tutorial Level: Beginner
  • Skills Required: Basic knowledge in HTML5 and CSS
  • Completion Time: Approximately 15 minutes
  • Warning: This responsive HTML and CSS tutorial is targeted towards beginners, but it can also be for designers and developers who want to have fun!

By the end of these quick tutorials about responsive web design with HTML5, you will already be on your way to web stardom, and by that, I mean, you’ll be ready to convert and make responsive websites!

Additional reading: If after reading this quick tutorial, you want to go more in depth check out this PSD to HTML tutorial: The Only Guide You Need in 2015 (ultimate learning 10k word guide)!

Are you ready? Show me your war faces! Roaaar!

responsive_website_tutorial_preview_large


How To Make A Website Responsive (Text Version) – Preparation

If you want to find video version of a little bit more advanced follow-up video tutorial, or you are coming from Youtube for demo and source files, just scroll down.

I promised that it will only take about 15 minutes to build a responsive website, and I will hold true to my word. Only, we shall start slow and small. We will start by creating a simple single-page website. Cool? Okay!

Frameworks you can use:


What is Responsive Web Design?

If you are fairly new to the term, then we have the perfect reading materials for you!

Our Goal

This is our goal.

By the end of this responsive CSS tutorial you will end up with something similar to the page above. It is a very plain design, but it will do the trick for now. It is fairly easy to clone the image as seen above, but the main goal here is to make it responsive. To make the website respond based on the size of your device’s screen size.

Try opening the demo on your smartphone and you will see this:

This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.

You will find all the files, including the images, in the download link below.

Before moving on, download Foundation and unzip it to a folder where all of your files for this tutorial will be located. It should look like this:

Open index.html and see several elements blasted in one page as a demo. We won’t use everything you will see in it, but you can learn a lot from it. Now, delete it or move it somewhere else so that we can start from scratch.

Our goal is to create a website which has the basic areas of a website: header, body, sidebar, and footer. Of course, everything will be responsive, from images down to text and elements placement.


Step 1: Understanding the Foundation

Okay, it is already given that we will use the structure above, but how will we translate that to HTML? Easy!

First, you need to understand a few things about Foundation and how layouting works. It uses 12 columns to define the width of each “section”, which is derived from foundation.css’ width of 1000px. So, if we write:

<div class="row">
<div class="twelve columns"></div>
</div>

The above code would mean that in this certain row, you will occupy twelve columns with the width of 1000px. While on the code below:

<div class="row">
<div class="twelve columns">
<div class="six columns"></div>
<div class="six columns"></div>
</div>
</div>

We placed two “six columns” inside of “twelve columns”, this would mean that “six columns” will occupy 50% of the width of “twelve columns”. The same is true for other number of columns:

<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<div class="row">
<div class="twelve columns"></div>
</div>
</div>
<div class="five columns"></div>
</div>
</div>

For “seven columns” we placed another row inside which occupies “twelve columns”. This means that the “twelve columns” will take the maximum width of “seven columns” and divide it into “twelve columns”. It’s a nest of rows and columns, which is important for our goal layout. Now that rows and columns, and nested columns, have been explained, let’s move on to the main show.


 

Step 2: Laying Out the Foundation

Using your favorite text editor, create a file named index.html then add the following at the very beginning of the file:

<!-- Editor's note: if you're wondering what are these items below, you should follow the link below -->
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<!-- Set the viewport width to device width for mobile -->

Welcome to Foundation

<!-- Included CSS Files -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]--><script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The above code is where we deal with the evil of Internet Explorer. It is also where we call on to different stylesheets which are necessary to make the whole thing responsive and run on mobile devices. It comes with Foundation. Then type the following code:

<div class="row">
<div class="twelve columns">
<h2>Header Twelve Columns</h2>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<h3>Body Seven Columns</h3>
</div>
<div class="five columns">
<h3>Sidebar Five Columns</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2>Footer Twelve Columns</h2>
</div>
</div>

I have already explained what these “rows” and “twelve columns” are above.

Tip: if it’s not clear to you why we should wrap the sidebar and body with “twelve columns” you can try removing it and see what happens!

By now it should look like this.

We haven’t added stylings yet, but you can already see how it jives with our goal. I’m not much of a designer but I will do my best to make this look amazing.

Wait, wait, wait! What’s that navigation bar, you ask? As I have mentioned earlier, this is one of the beauties of Foundation. It has extensive documentation that will teach you how to properly use forms, navigation, buttons, grids, CSS, and other elements covered by Foundation.

Everything is basically done now, all we need to do is add some images and paragraphs and design the whole thing. If you followed this tutorial, then by now you have already created your first responsive web page!


Step 3: Adding Content To Web Design

This step is needed to actually see how the webpage will look like in its full glory. Copy some Lorem Ipsum and paste it on your “body” div, then insert images using tag and then you’re on your way to becoming a superstar with this!

If you’ll go back and check the demo, you might notice that the background isn’t exactly white, but with a subtle pattern. Choose one on SubtlePatterns and see for yourself which works best.


Step 4: There is no Step 4

Well, actually there is a step 4. The next thing you need to do is study the files you downloaded and start creating your own responsive web page from scratch. There are a lot of other tools you can use aside from Foundation, but the idea is basically the same. Don’t forget to check the documentation!

What do you think about this tutorial? This is my first time writing one, and it may appear messy to experts, but comments and suggestions are always welcome so that we can all improve, right? Start typing now!

Note: If you are looking for quick and easy way to build your own free website, check out Wix website builder. It allows to make quick HTML5 designs which are mobile friendly and beautiful.

A few weeks ago, we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this responsive css tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to read some of your opinions very, very much!

In case you are thinking of building a website (for real), here’s a special 20% exclusive discount from Bluehost – applies to all packages! We recommend them!


How To Make Website Responsive: Video Tutorial

Now if you were looking for video version and are ready to build responsive web design with HTML5 and CSS3 – you are in the right place. Just download source files, view demo and click play on the video – let’s make a responsive website!

Build Flat Responsive WordPress Website From Scratch (High Quality Course)

If you are looking to take your web design career to whole new level in 2015 – we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat –

You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will convert website to fully responsive and functional WordPress website.

Yes, you will learn how to make website responsive, but this time you will be building high quality website design you can be really proud of!

We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! Watch the video to see exactly what’s inside.

What you are waiting for? Take your skills to the next level right now.

P.S. Looking for more responsive web tutorials? See it pays to read until the end!

As a free bonus, learn how to make a responsive email design in one more quick tutorial!


How To Make Email Responsive: Quick Bonus Tutorial

As smart phones and tablets have become popular, more and more people are have been reading their emails regularly on their small screen devices. According to Campaign Monitor, mobile surpassed web and desktop client usage last July 2012. As the mobile email usage grows, web developers and designer must consider optimizing the look of their email newsletters on phones and tablet.

Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have some rules and regulations. That being said, some CSS might work while some might not.

So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go.

For your reference, read Campaignmonitor and Emailology.

To give you an idea how to create a responsive email template, let’s go ahead and create one, it is actually very similar to the steps you used before to make responsive web design with HTML5.


Resources You Will Need to Complete This Responsive Web Tutorial:

Our Final Product

final-product-email

folder-structure

File Structure.

Our file structure will consist of an img folder and an HTML file since we will do an internal CSS this time:

  • index.html – this will serve as our main file
  • img folder – for our image

The Markup: Building Design in HTML

Our HTML document starts with a DOCTYPE and then followed by HEAD, TITLE and BODY section. Then, we’ll add the link to our Google fonts – “Pacifico”. We will also add the CSS later on our HEAD section. So let’s go ahead and add this to our index.html file.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Newsletter Template</title>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>

For our body tag, we will be set margins off and then we’ll put the attribute selector yahoo=”fix”.

To explain this attribute, let me give you quick information about Yahoo. According to campaignmonitor, Yahoo mail ignores media queries. To solve this, we need to use a tricky solution by using attribute selectors.

By adding a value of “fix” to the Yahoo attribute, it can give me access to the general selectors of the media queries. To learn more about this, you can check this article.

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix>

For the layout structure, we will wrap the whole thing with a wrapper table and set the width to 100%.

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">

Next, the header and the following table elements will be wrapped by a container with 600px table layout. We’ll put a class of border-complete and put styles on the header on our CSS code later. The basic structures of the columns and inline CSS of elements such as the background color and width will also be added.

For our table and image elements, we will also add class device Width for the responsive look. Inside our header section, we will include two divider images and a logo.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-complete deviceWidth" bgcolor="#e9e9e9">

Now that we have our header set, let’s go ahead and add the banner image and the text markup.

For this part, we will be using the file img-banner.jpg on the resource that we provided above. The markup is just the same as the structure of the head except for the border. Instead of adding border-complete class, we will add border-lr class (this will add border on the left and right only) along with the deviceWidth class along with deviceWidth class.

<table width="600" class="border-lr deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed" >
<tr>
<td>
<a href="#"><img class="deviceWidth" src="img/img-banner.png" alt="" border="0" /></a>
</td>
</tr>
</table>

For the banner text, we will give it a height of 108px and align all texts to the center. The text will have a class of banner-txt.

<table width="600" height="108" border="0" cellpadding="0" cellspacing="0" align="center" class="border-lr deviceWidth" bgcolor="#3baaff" >
 <tr>
 <td align="center">
 <p id="banner-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 <a href="#" class="white-btn" align="center"> LEARN MORE</a>
 </td>
 </tr>
 </table>

For the products section, we need to align two columns. Go ahead and create two tables next to each other and give each column a 48% width. We will also add H2 and H3 tags along with their respective classes and then will later on, add the styling on our CCS codes.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-lr deviceWidth" bgcolor="#fff">
 <tr> <td align="center"><h2 id="our-products">Our Products </h2> </td> </tr>
 <tr>
 <td class="center">
 <table width="48%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" >
 <tr>
 <td align="center">
 <h3 class="our-products">Product No. 1 </h3>
 <a href="#"><img width="262" src="img/image1.jpg" alt="" border="0" class="deviceWidth" /></a></p>
 <p class="our-products"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </td>
 </tr>
</table>
<table width="48%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth" >
 <tr>
 <td align="center">
 <h3 class="our-products">Product No. 2 </h3>
 <a href="#"><img width="262" src="img/image2.jpg" alt="" border="0" class="deviceWidth" /></a></p>
 <p class="our-products"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </td>
 </tr>
</table>
</td>
 </tr>
 </table>

The coupons section will just have the same layout structure like the special offer section but will have their own styling classes.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-lr deviceWidth" bgcolor="#fff" ><tr>
 <td style="text-align: center;">
 <h2 id="coupons"> Check our site for coupons </h2>
 <p id="coupons">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
 <a href="#" class="blue-btn" align="center"> LEARN MORE</a>
 </td>
 </tr>
 </table>

The Footer will also have the same styling like the header part so go ahead and copy the styling of the header. Inside our footer we will create another table for our social icons and give it an id of social-icons followed by another row for our copyright text. At the end of our footer we will put a closing tag to our wrapper table.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="border-complete deviceWidth" bgcolor="#eeeeed" >
 <tr><td width="100%" ><img src="img/divider.png" class="deviceWidth"/> </td> </tr>
<tr>
 <td align="center" valign="top" id="socials">
 <table id="social-icons" border="0" cellspacing="0" cellpadding="0" >
 <tr>
 <td><a href="#"><img src="img/fb.png" width="32" height="32" style="display:block;"/></a></td>
 <td><a href="#"><img src="img/twitter.png" width="32" height="32" style="display:block;"/></a></td>
 <td><a href="#"><img src="img/pinterest.png" width="32" height="32" style="display:block;"/></a></td>
 <td><a href="#"><img src="img/google.png" width="32" height="32" style="display:block;"/></a></td>
</tr>
 </table></td>
 </tr>
<tr>
 <td style="text-align: center;">
 <p id="footer-txt"> <b>© Copyright 2013 - Email Template - All Rights Reserved</b> <br/>
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 </p>
 </td>
 </tr>
<tr><td width="100%" ><img src="img/divider.png" class="deviceWidth"/> </td> </tr>
 </table>
</table>

By this time, you must have something like this.

without-css


The CSS Tutorial Part

Now that we have our markup structured, we can now start adding different styles on the head section to make it look good and responsive for the desktop and mobile devices view.

Let’s first add stylings for our general elements, such as the body, image, buttons and tables. For our body elements, we will set this to 100% width for the responsive look.

For our table, we will set it to border collapse to set the tables whether the table borders are collapsed into a single border or detached as in standard HTML. Then followed by the logo and buttons, which are fairly self- explanatory.

body {
 width: 100%;
 background-color: #fff;
 margin: 0;
 padding: 0;
 -webkit-font-smoothing: antialiased;
 font-family: Georgia, Times, serif;
 }
table {
 border-collapse: collapse;
 }
td#logo {
 margin: 0 auto;
 padding: 14px 0;
 }
img {
 border: none;
 display: block;
 }
a.blue-btn {
 display: inline-block;
 margin-bottom: 34px;
 border: 3px solid #3baaff;
 padding: 11px 38px;
 font-size: 12px;
 font-family: arial;
 font-weight: 700;
 color: #3baaff;
 text-decoration: none;
 text-align: center;
 }
a.blue-btn:hover {
 background-color: #3baaff;
 color: #fff;
 }
a.white-btn {
 display: inline-block;
 margin-bottom: 30px;
 border: 3px solid #fff;
 background: transparent;
 padding: 11px 38px;
 font-size: 12px;
 font-family: arial;
 font-weight: 700;
 color: #fff;
 text-decoration: none;
 text-align: center;
 }
a.white-btn:hover {
 background-color: #fff;
 color: #3baaff;
 }

For our border, we have two classes. The first one is the border-complete class that will set all the borders (top, bottom, left, right) while the second class border-lr will only set the border for left and right.

.border-complete {
 border-top: 1px solid #dadada;
 border-left: 1px solid #dadada;
 border-right: 1px solid #dadada;
 }
.border-lr {
 border-left: 1px solid #dadada;
 border-right: 1px solid #dadada;
 }

For our elements for H2, H3, and paragraph tags, we’ll just add styling for colors, text-align and a series of padding to make them look good on the screen.

#banner-txt {
 color: #fff;
 padding: 15px 32px 0;
 font-family: arial;
 font-size: 13px;
 text-align: center;
 }
h2#our-products {
 font-family: Pacifico;
 margin: 23px auto 5px;
 font-size: 27px;
 color: #3baaff;
 }
h3.our-products {
 font-family: arial;
 font-size: 15px;
 color: #7c7b7b;
 }
p.our-products {
 text-align: center;
 font-family: arial;
 color: #7c7b7b;
 font-size: 12px;
 padding: 10px 10px 24px;
 }
h2.special {
 margin: 0;
 color: #fff;
 color: #fff;
 font-family: Pacifico;
 padding: 15px 32px 0;
 }
p.special {
 color: #fff;
 font-size: 12px;
 color: #fff;
 text-align: center;
 font-family: arial;
 padding: 0 32px 10px;
 }
h2#coupons {
 color: #3baaff;
 text-align: center;
 font-family: Pacifico;
 margin-top: 30px;
 }
p#coupons {
 color: #7c7b7b;
 text-align: center;
 font-size: 12px;
 text-align: center;
 font-family: arial;
 padding: 0 32px;
 }

For our footer, we will style our social icons and give it a width of 28%. The text will have a padding and an Arial font face.

#socials {
padding-top: 12px;
 }
p#footer-txt {
 text-align: center;
 color: #303032;
 font-family: arial;
 font-size: 12px;
 padding: 0 32px;
 }
#social-icons {
 width: 28%;
 }

By this time, you already have the same perfect look just like the PSD design.


Using Media Queries for the Responsive Look

To make our email template responsive, we will start adding some media queries for smaller devices. This is a technique to make HTML and CSS respond to the device width of the browser. So to do this, add the following code.

@media only screen and max-width 640px {
 body[yahoo] .deviceWidth {
 width: 440px !important;
 padding: 0;
 }
body[yahoo] .center {
 text-align: center !important;
 }
#social-icons {
 width: 40%;
 }
}
@media only screen and max-width 479px {
 body[yahoo] .deviceWidth {
 width: 280px !important;
 padding: 0;
 }
body[yahoo] .center {
 text-align: center !important;
 }
#social-icons {
 width: 60%;
 }
}

On this code, we use the Yahoo attribute that we put on the body tag to let us use media queries on Yahoo mail. On a 640px viewport, we will set the class deviceWidth to 440px and set the social media icons with by 40%. While on the 479px viewport, we’ll set the class deviceWidth to 479px and set the social icons to 60% width.


Final Thoughts

Congratulations! You now have the idea how to optimize emails for mobile devices. Hope you enjoyed all of these responsive website design tutorials and please free to post you comments and suggestions below. Cheers!

Powered by WPeMatico

55 Fresh jQuery Gallery And Image Sliders: Best of 2016

Every website usually requires some image gallery solution and usually you don’t want to spend time creating one from scratch.

For that reason I made the job easy for you and decided to collect all the best image gallery (free and premium) solutions available! Since usually the best galleries are created in jQuery, I did focus on jQuery type sliders mainly, but there are a few simple CSS galleries as well.

So here it is – this article is organized in five main categories so you can easy switch to your interesting part. Here you’ll find an image gallery for every need, definitely it should be enough to choose from!Before we start, I wanted to tell, that it’s up to you to go for free or premium solution. I did find quite a bit free quality image solutions, that you will enjoy. Of course, with premium ones – there were some galleries that simply blew my mind.

Slide Framework Website Inspiration

Slides Framework page by Designmodo is stunning inspirational website design as well as excellent product..if you want to present your service, portfolio in truly stunning way. Slides contains 70 beautiful slides and 11 quick-start templates.

Here you go, just go through the collection – and find the best image solution for you. If it’s a personal project, surely you will not want to spend any money. But on other side if it’s good paid freelance job, maybe it’s worth spending little money to really leave impact to your client and save lots of time at the same time!

P.S. I saved the best for the last..so make sure you read the article until the end 😉

Table of contents:

  1. jQuery Image Slideshows
  2. jQuery Image Galleries
  3. jQuery Image Sliders
  4. jQuery Portfolio, News and Tour Sliders
  5. CSS Based Galleries

Well, I guess what I am suggesting is to always look how much time it takes for you to modify, install or setup free solution. If you aren’t as skilled or it’s time consuming – definitely look into pre-made code and cheap quality tools like these.

Surely you can spare 5-19$ to save your time. And if you are looking for more shortcuts I recommend CodeCanyon marketplace!


jQuery Image Slideshows

Below you will find all the best jQuery slideshows. Usually slideshows are used on top of the website to present the most important parts in the most fashionable way.


1. AviaSlider ($14)

AviaSlider - jQuery Slideshow

AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use image slideshow plug-in built with jQuery. It has a set of really unique transitions that I have not seen anywhere else, as well as some basic transitions.

It comes with an image pre-loader so the slider starts working only when images are loaded and ready to be presented. No clumsy animations with half loaded images.

  • 8 unique transition effects
  • Lots of easy to set options to create your own effects
  • Included image pre-loader
  • Auto-play that stops on user interaction
  • Valid HTML5 and CSS 3 Markup

To see how it works live, here is demo preview.


2. Jssorr (Free)

Jssor Image slider

Jssor image slider

Jssor Slider is a touch swipe image slideshow with 360+ JavaScript slideshow effects. When you touch Jssor Slider, it will freeze animation and swipe slides to the direction that finger moves to.

There are more than 360 different effects, you can check all of them here. My own favourite slideshow effects are simple fade slideshow and carousel slider.


3. S3Slider (Free)

s3slider-jquery

JQuery S3Slider

S3Slider a jQuery Slideshow with three different features and displaying sides. You can easily adjust the size of slider, delay change speed. Oh and it comes with a really good documentation.


4. Camera Slideshow (Free)

camera-jQuery-image-slideshow

Camera jQuery image slideshow.

Camera slideshow is a jQuery plugin, that can also be used as a WordPress plug-in.

It comes with 33 build-in themes, but you can be creative too, because slideshow has CSS file included, where you can customize the parts you want.

You can easily implement HTML objects, videos and captions. One downside is that this slideshow is based on a project Diapo, that is no longer supported. But still it has been tested on all mayor browsers. Still make sure you test it yourself before using.

Check the live demo here.


5. Sequence JS (Free)

Sequence_js-javascript-slider

Sequence is a JavaScript slider based on CSS framework.

Sequence JS is a JavaScript slideshow based on a CSS framework. It’s meant to be used for creating sliders, banners, presentations and other step-based applications.

It’s main features are:

  • CSS Animation Framework
  • Responsiveness
  • Touch support
  • Cross browser compatibility
  • 30+ animation options and API
  • Pre-build theme designs

If free pre-built themes aren’t enough for you, check out their own theme shop. You can also simply order your custom-made theme. But as I look at it, you really do get all you need in the free version, plus there are quite a bit free themes available.

Check out their website for live preview.


6. jQuery Banner Rotator / Slideshow ($11)

jQuery-Banner-Rotator

jQuery Banner Rotator or Slideshow

This is a jQuery banner rotator plug-in featuring multiple transitions. The thumbnails and buttons allow for easy navigation for your banners/ads. The banner rotator is also re-sizeable and configurable through the plug-in parameters.

Features:

  • Multiple transitions available. Also can be set to show a different transition per slide.
  • Able to load unlimited number of images, each with customisable text description, tool-tip, and hyperlink.
  • Show or hide components, including play/pause button, directional buttons, thumbnails, text panel, and tool-tip.
  • Can be set to automatically play on start up with customisable timer delay. Also, you can set a different time delay for each slide.
  • Banner, thumbnails and buttons are all resizeable.
  • and more..

Check the live demo here. I am pretty sure you will also be amazed by this slideshow solution.


7. Slide JS (Free)

Slides-JS-jQuery-slideshow

Slides JS jQuery slideshow

Slide JS is a jQuery plug-in that is responsive, has touch support, easy setup and CSS3 transitions. It’s great to be displayed as a starting page of your website, and it is free. It also has full documentation, check the live preview on their home page.


8. Slideshow 2 (Free)

slideshow

Slideshow 2 image gallery

Slideshow 2 is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. Please visit their website for full feature list.


9. JavaScript TinySlideshow (Free)

javascrip-tinyslideshow

Very simple image slider solution.

This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.

You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider. I wanted to include it in this collection because it is so lightweight. Click here to download this slideshow and see live preview.


jQuery Image Galleries

In this section you will find Image Galleries. They are best suitable for portfolios, but can also be used in blogs. So let’s dig in.


10. Galleria

Galleria-JavaScript-Image-Gallery

Galleria-JavaScript Image Gallery

Galleria is a JavaScript Image Gallery. It’s built so that it simplifies your process of creating a beautiful image gallery. You don’t have to be a programming expert to use it. Just a few lines of code, add some pictures and you’re done.

Galleria has a lot of great tools, which you can use to create your own image gallery. Gallery you can see in the screenshot is the free version, which you can customise as you want.

However if you want to get any of Galleria other designs, you will need to pay for them, find more on their store. These themes are in price range between $9 and $29.

Main features are:

  • Fully responsive
  • Touch support
  • Support for YouTube, Flickr and Vimeo videos.

Find live demo at their website.


11. Sideways

sideways-image-jquery-gallery

Sideways Image Gallery

Sideways Image Gallery is a jQuery plug-in with added CSS3 styling. The Gallery is responsive and features full-screen images with different modes and custom scrollbars. It is a modern and eye catching image gallery.

This one is the most suitable for photography portfolio showcasing, because it can really gives the right credit to their work.

As if it wasn’t good enough, it’s also free to use. Check live preview here.


12. Visual Lightbox

Visual-Lightbox-Gallery

Visual Lightbox Gallery

VisualLightBox is a free wizard jQuery program that helps you easily generate web photo galleries. It is based on famous LightBox2 script. In a few clicks you can create breathtaking galleries without writing a single line of code.

On their website they offer a lot of templates, that can be used for variety of purposes. It is the most suitable for travelling agencies, adventurers blogs and work portfolio websites.

Main features are:

  • Cross-browser support
  • No coding, wizard guides you trough the process
  • Fully responsive
  • Export to Joomla or WordPress
  • Lightweight..and more.

So are you also excited to try it out? Check their website for a full feature list and many of their demos.


13. TripTracker

Trip-Tracker-slideshow

TripTracker slideshow

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature. It does exactly what it says that it does. There is no extra options, it is a simple photo viewer. Very suitable for articles.

Click here to try it out.


14. NoobSlide

noobslide

Noobslide image gallery

NoobSlide has 8 different examples how to view your images using MooTools. Unfortunately there isn’t any documentation, but is very easy to use gallery and worth of checking it out.

It can be used as a showcase on a travelling site, blog or even portfolio.


15. PrettyPhoto

Pretty-Photo-jQuery-lightbox-slider

Pretty Photo slider

Pretty Photo is a jQuery Lightbox clone. Pretty similar to original Lightbox with few added features and full documentation. It is easy to setup and very flexible.

This plug-in supports videos, Ajax and iframes. It can be used for single photos or galleries. Galleries can also have mixed content. It is very suitable for different types ob blogs.

For demo and download visit them here.


16. Unite Gallery

Unite-Gallery-jQuery-plugin

Unite jQuery Gallery

Unite Gallery is a modern gallery that uses jQuery. It is modular designed, with customization in mind. You can also create your own theme with ease.

This gallery is fully responsive. It offers 9 different skins and is fully documented. You can download it as WordPress, Drupal, PrestaShop, OpenCart and Joomla plug-in.

This gallery is suitable for photography showcasing or Restaurants menus. It is free to use, as it is released under MIT license. All in all it’s a great addition to the image packed websites.

You can see it in action here.


17. Auto Generating Gallery

auto-generating-gallery

Auto generating gallery

Auto Generating Gallery, well words – “Auto Generating” don’t mean that that it takes the pictures for you. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. Gallery use PHP for this web wizardry. You can find complete tutorial and demo here.


18. HighSlide JS

Highslide-JS-JavaScript-gallery

Highslide JS – JavaScript gallery

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to pop-up windows. It streamlines the use of thumbnail images and HTML pop-up’s on web pages. You can use it as thumbnail viewer or scrolling HTML content holder.

Live preview of its functionality can be found here.


19. Flat-styled Polaroid gallery

Scattered-Polaroids-Gallery-jQuery-slider

Scattered Polaroids Gallery-jQuery plugin

Polaroid gallery is available as a jQuery plug-in. It takes the vintage look of Polaroid pictures to the new level.

Strengths of Polaroid Gallery are, that is designed with responsive and flat design in mind. Polaroid Gallery also offers shuffle transition and content holders if you need it. The images can flip and show its back side.

This gallery is a good choice for travellers or bloggers who want to show their last adventure.

Make sure to see it in action here.


Jquery Image Sliders

This section is dedicated to all the best and most beautiful sliders, booth premium and free ones. They do a similar job as the Slideshows, but can pinpoint the most important thing on content holders.


20.Touch Enabled RoyalSlider ($14)

RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin

RoyalSlider jQuery Image Gallery.

Royal Slider is a jQuery image gallery and more. This slider can be used as an image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery carousel or just as presentation. Options are limitless. This all around slider is also available as WordPress plug-in.

It has build in animated captions, supports touch for mobile devices and is fully responsive. This is a must have jQuery image slider. Check live preview here.


21. LayerSlider ($11)

LayerSlider-jQuery-Slider

LayerSlider Responsive jQuery Slider Plugin.

LayerSlider is premium WordPress plug-in for creating beautiful image galleries, content sliders and amazing slideshows with unbelievable effects.

LayerSlider comes with 13 build-in skins. It has more that 200 2-D and 3-D slide transitions and 3 types of navigation. LayerSlider also offers support for mobile devices and multiple layouts.

You can add any content, form images, text, custom HTML, YouTube video, Vimeo video to HTML5 self-hosted multimedia content.

By allowing you to build semantic markup with custom attributes that search engines can index easily, is also SEO friendly.

See it for yourself here.


22. UnoSlider ($10)

UnoSlider jQuery plugin

UnoSlider

UnoSlider is a image slider that comes as a WordPress and jQuery plug-in. By the description of developer, UnoSlider has unlimited transition animations.

This image slider is fully responsive and is also compatible with older browsers. Layers are very well animated with lots of customization options. Setup and use are simple.

UnoSlider features more than 30 animation options, per-slide options and is easy theme-able. This slider is also equipped with public API, image pre-loader and has the ability to hold multiple sliders on one page. HTML content can be shown as well. Choose from 12 pre built themes and more than 40 transitions options.

You can see demo of this amazing image slider here.


23. Master Slider ($17)

Master-Slider-jQuery-image-Slider

Master Slider – jQuery Touch Swipe Slider

Master Slider is a high value and quality-designed image and content slider. It is available as a jQuery and WordPress plug-in. And it also has a free version.

This slider has everything that you need to build eye catching image and content sliders. It’s fully responsive and can work on any screen or any device. You can choose from 6 different interactive transitions and 25 pre-built templates.

This slider offers touch swipe navigation, animated layers, thumbnails and tabs. Master Slider is also equipped with smart preloading of images.

For live preview click here.


24. Wow slider

WOW-jQuery-Slider

WOW jQuery slider

Wow slider is actually a slider for non-coders. It offers drag and drop menu, that you use to create your image slider for your website.

In the core Wow slider is a jQuery image slider, but can also operate without jQuery. It can be as light as you want.

The drag and drop creator can generate HTML page or WordPress and Joomla plug-in. You can choose from 25 different transitions and is free to use.

Main features are:

  • Fully responsive
  • Highly customisable
  • Touch swipe navigation
  • All browser support
  • SEO friendly

These are just a few main characteristics. For full list and live demo check their website.


25. Slider Revolution ($14)

Slider Revolution

Slider Revolution

Slider Revolution is a responsive and full-width slider with must-see-effects and is SEO friendly. See the heaps of custom transitions and animations for each object on the page! Customize this slider with their convenient drag&drop back-end to your needs.

This plug-in features tons of unique transition effects, an image pre-loader, video embedding, auto-play that stops on user interaction and lots of easy to set up options to create your own effects. Slider Revolution can be purchased as a WordPress, Drupal, PrestaShop, Magento OpenCart and jQuery plug-in.

Few other important benefits of Slider Revolution:

  • Image and thumbs fully resizeable
  • Using CSS animation with fallback to jQuery
  • Unlimited caption layers
  • Captions like video, image and HTML tags can be easily created
  • Unlimited slides
  • iPhone & Android swipe touch enabled
  • jQuery conflict free plug-in
  • Customizable via plug-in back-end
  • Easy installation in your website

Worried about coding skills? Slider Revolution had a Video Support which is easy to follow. No advance coding skills required, easy as cooking bacon. Ah..but what am I saying just check for yourself.


26. Accordion Slider ($11)

Accordion-Slider-jQuery-image-slider

Accordion Slider – the best jQuery accordion slider on the market.

Accordion Slider is a fully responsive jQuery based slider. Available also as WordPress plug-in. There is almost nothing you can’t do with it.

Accordion Slider comes with animated layers and smooth animations. You don’t have to compromise with the design, as the slider has touch support for the best possible user experience.

Pagination on this slider is unique, because you can set number of panels visible per page. The layout is fully customizable.

Because it has lazy loading feature, the images can be loaded only when they are viewed. You can also set a high-resolution images to be loaded only on high PPI screens, as it has support for Retina screens.

Some additional features are available for WordPress plug-in, so make sure to check out live demo.


27. Fotorama image slider

Fotorama-jQuery-image-slider

Fotorama jQuery image slider

Fotorama image slider is simple but at the same time very powerful. You can use it as an jQuery or also as WordPress and Ruby on Rails plug-in. To help you setup Fotorama, they also have a video tutorial.

It is a simple way to show your pictures or images, but powerful enough to blow you away. It’s free to use. Check it out here.


28. All in One slider ($11)

All-in-One-Jquery-Slider

All in One jQuery slider

All in One slider is a jQuery slider and comes in five different ways to help you create beautiful Banner rotator, Thumbnails Banner, Banner with Playlist, Content Slider and Carousel.

It’s an advanced slider, that allows you to create powerful slides with animated text and HTML tags. This is a powerful tool that provides you with everything you need in development of a website to show your products or images.

All in One slider is fully responsive and touch screen supporting image slider. All in One slider offers 16 different transitions and animated text. Supports all mayor browsers and is a award winning product.

See it for your self, here is a live preview.


29. Blueberry image slider

Blueberry-jQuery-image-slider

Blueberry jQuery image slider

Blueberry image slider is a jQuery plug-in, that was developed specifically for responsive web design. Blueberry image slider is an open-source project, based on a 1140px grid system from cssgrid.net. It’s a simple and at the same time excellent free option.

I’m sure you will like it as much as I do. Check the live preview and download option here.


30. RhinoSlider

Rhinoslider-jQuery-slider

Rhinoslider slider- The most flexible slider

RhinoSlider is a jQuery slider that comes with the possibility of customising your version before downloading. This can significantly decrease time spend on setting it up. You can of course download the whole package, but I think the best way is to use the generator.

It is very flexible and offers a lot of options on callbacks and callbefores. You can set it on auto-play or make it stop on hover. Captions are also available and are customisable.

Check for yourselves on their website. It is a great free tool.


31. Slippry

Slippry-jQuery-image-slider

Slippry image slider

Slippry image slider is a jQuery plug-in that uses CSS3 transitions and HTML5 elements. It can be as simple or as complex as you want it to be.

Because the CSS and Sass files are included, you can let your imagination free and style it as you want it. Slippry does its job best at the top of the home page. With captions it can serve as good presentation of a company.

Dont believe us, check it here for full documentation and live demo.


32. Un Slider

Unslider-jQuery-image-slider

Unslider – jQuery image slider

Unslider is a very simple slider that is based on jQuery. It’s very small but powerful. You can change everything, so it works and feels like you want.

Unslider is really the simplest slider I have came across to see it. You really don’t have to be an expert to use this one. Just add a few lines of code, put in images and you have a slick slider for you website or article.

Their whole site is a one big demo for this slider. Just visit their website and see.


33. Unleash 3 ($9)

Unleash-jQuery-Slider

Unleash jQuery Responsive Accordion Slider

Unleash 3 is another jQuery accordion slider on our list. It’s one of the best there is. You have a lot of options and settings to choose form. You can add captions and controls with different styles or add any other content with multiple CSS3 animations.

Main properties are:

  • Fully responsive
  • Full screen mode
  • Ability to choose a slide when page is loaded
  • Step by step documentation
  • Touch support
  • Video support

Be sure to check their demo here.


34. MightySlider ($18)

mightySlider--jQuery-Slider

Mighty Slider – jQuery plug-in

Mighty Slider is everything you need to create amazing one-directional slider. Mighty Slider can be used as a banner rotator, video gallery, presentation and basic slider. All of this is possible because of a very powerful API. Mighty Slider gives you total control over layout and design.

The main features of Mighty Slider are:

  • Fully responsive
  • HTML captions with customisable effects
  • Cross browser compatible
  • Functional on all devices
  • and is SEO optimized.

Check full documentation and demo.


35. Fullscreen Slit slider

Fullscreen-Slit-jQuery-Slider

Fullscreen Slit Slider

Fullscreen Slit Slider is a jQery plug-in and uses CCS3 animations. Slider can stretch across the whole viewport or be used as slider inside of other context.

Fullscreen Slit Slider is fully responsive and has some unique split screen transitions. With captions it is a great way of representing your cause to the visitors.

Check it out in action. I am sure you will be amazed of what this free slider can do.


JQuery Portfolio, News and Tour Sliders

This section is dedicated to sliders that are particularly designed to showcase portfolios, news and tours.


36. jQuery Carousel Evolution ($5)

jQuery-Carousel-Evolution-jQuery-slider

jQuery Carousel Evolution – The Web’s Most Powerful Carousel Slider

JQuery Carousel Evolution is an easy and low cost way to create eye catching product or team presentation. Yes it’s a premium slider, but it delivers a great value for it’s money.

jQuery Carousel Evolution is a powerful slider that uses HTML markup. It offers 9 different styles for sliders. This slider also supports YouTube and Vimeo videos implementation. All major browsers are also supported.

Main features are:

  • Configurable Image. Allows you to set the size of the front and back image.
  • Configurable number of images visible per scroll. Also set the position of the image.
  • Automatically create the shadow effect.
  • Automatically create image reflection. No more Photoshop. The reflections appear instantly under each image.
  • You can add text description that is associated with each image, and placing it anywhere in the web page.
  • Public API . The plug-in offers a public API which you can use to control component inside the slider from within your own scripts.

You can check the demo here.


37. Cube Portfolio – Responsive jQuery Grid Plug-in ($16)

Cube-porfolio-jQuery-responsive-slider

Cube Portfolio responsive grid plug-in

Cube Portfolio is a very cool jQuery plug-in with tons of animations. It offers custom captions and plays well with your current HTML and CSS code.

Cube Portfolio provides 30+ options, that gives you complete layout and design control. Slider has fully responsive design and is fully customizable. It uses CSS3 animations and you can choose from 19 starter pack templates. Cube Portfolio is also equipped with filtering system.

It is best used for, vertical sliders, portfolio projects, team members presentation, photography showcasing or other mosaic grids. Usage is limitless. Cube Portfolio is also available as an WordPress plug-in.

Check live preview here.


38. Slideme

slideme-jQuery-slider

Slideme jQuery slideshow

This jQuery plug-in is great for the top of the website, to present your work or say more about you.

Slideme has got full documentation and tutorial how to set up your slider, for every type of device individually. Design is fully responsive with CSS3 animations. It is easy to setup and provides public API.

Slideme is free to use and definitely worth a look. Check demo here.


39. PgwSlider

PgwSlider-jQuery-slider

Pgw slider

Pgw slider is a jQuery slider, that is designed for showcasing your images. Slider is fully responsive. It is lightweight and all browser compatible. Pgw slider is also SEO friendly.

This slider is very suitable for news or blogging websites as it can show the most recent post or articles.

For full features and demo slider click here.


40. All Around content slider ($9)

All-Around-jQuery-Slider

All Around content or carousel slider

All Around slider is a multi purpose jQuery slider. You can use it as carousel or slider. It also supports video. All Around slider offers 6 pre built themes or layouts and ton of options.

Slider is equipped with drag and move circles option and infinite loop. Besides that, it’s fully responsive with mobile support. Every single image can be magnified and can contain description.

All Around slider is best used as a product showcase or team presentation.

Check live preview here.


41. Lens Slider

Lens-Jquery-Slider

Lens Slider jQuery and WordPress plug-in

Lens Slider is an open-source project and so, fully customisable. Slider uses very simple HTML markup of unordered list. Images are show as you can see on screenshot. No other option is available. Lens Slider is also available as a WordPress plug-in and free to use.

The most suitable usage would be product, service or team presentation.

Check it out here.


42. Gridder

Gridder-js-jQuery-slider

Gridder jQuery and Ajax plug-in

Gridder is an awesome slider for showcasing your work. Gridder kind of mimics the Google image search. To view the larger picture you click on a thumbnail and it expands. This is a great way to show big amount of images at the same time.

Gridder is available as a jQuery or Ajax thumbnail previewer. It is an awesome free solution for you next portfolio project.

For jQuery live preview check here. If you want Ajax click here.


43. Barack Slideshow 0.3

Barack-JS-Slideshow

Barack JS- JavaScript slideshow

Barack Slideshow is an elegant, lightweight slideshow written in JavaScript. This slideshow can operate with vertical, horizontal and irregular lists. The images are preloaded with incorporation of MooTool Assets. To keep your code clean, you should check the CSS code. This means changing some parts if needed.

Barack Slideshow can be used as a portfolio showcase, product list or even subsidiaries presentation.

Here you can find a demo and test different options.


44. jQZoom Evolution

jqzoom

JQ Zoom Evolution

JQZoom is a JavaScript image magnifier, built on top of the popular jQuery JavaScript framework. jQZoom is great and really easy to use script to magnify parts of your image.

This image magnifier is the most suitable for online stores and restaurants menus.

Find the documentation and demo here.


45. Multimedia Portfolio 2

Multimedia-Portfolio-2-jQuery slider

Multimedia Portfolio 2-jQuery slider

Multimedia Portfolio 2 is a jQuery plug-in that can automatically detect the extension of each media and apply the adapted player. It supports images and videos. Multimedia Portfolio uses simple HTML markup and it’s easy to use.

This slider is best suitable for showcasing products, services and even news.

Check out their demo.


46. JQuery Virtual Tour

jquery-virtual-tour

JQuery virtual tour

JQuery Virtual tour is an extension to the simple panorama viewer. This JQuery virtual tour allows you to transform some panoramic views into a virtual tour! It’s a great plug-in that is worth looking at.

You can find demo and download option here.


47.JQuery Vertical News Slider

Vertical News-jQuery-Slider

Vertical News slider – jQuery plug-in

JQuery Vertical News slider is very useful for websites that want to show some news or marketing campaigns on their site. It’s responsive and uses CSS3 animations. Vertical News slider also allows you to fully customise the style of the slider.

Check live preview here.


48. Multi item slider

Multi-Item-jQuery-Slider

Multi item jQuery gallery

This gallery is also a tutorial how to create it on your own. Multi item jQuery gallery was inspired by Apple slider, that has shown multiple products at once. It’s fully responsive and flat designed with variety of effects.

Multi item jQuery gallery is very suitable for online stores for showcasing their products. It comes with simple navigation, as seen on a screenshot. The navigation is very useful to change between variety of categories.

For live preview click here.


CSS Based Galleries

We have come to our last section, where you will find the best pure CSS Based Galleries. They may not be as popular but are sure worth a try. See it for yourselves.


49. HoverBox Image Gallery

hoverbox-image-gallery

HoverBox Image Gallery

HoverBox Image Gallery is basically a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. For faster loading it only uses one image for thumbnail and roll-over preview. All major browsers are supported. HoverBox Image Gallery is free to use for your own projects.

It is best used as a photography showcasing for photographers, any type of portfolio and restaurant menus.

Live preview here.


50. CSS Image slider with 3-D transitions

css3-image-slider

CSS3 image slider with 3-D transitions

CSS image slider is a experimental project that also includes full tutorial. For animation purposes it uses CSS and CSS3 techniques with the addition of 3-D effect on transitions. Intended usage is strictly as image slider.

CSS image slider can be used for product and service showcasing. In my opinion it could do well also as image slider in a full width article.

Check out live preview.


51. CSS3 animated image gallery

CSS3-Animated-Image-Gallery

CSS3 animated image gallery

CSS3 animated image gallery uses CSS3 and HTML5 to render effects. The images zoom in when you hover over. This enables a more detailed look. If you are interested, you can take on tutorial and create it yourself. Otherwise you can just download the source code.

CSS3 animated image gallery it’s suitable for photography showcasing.

Live preview is available here.


52. Filtronio CSS3 Portfolio ($5)

Filtronio-CSS-image-gallery

Filtronio- pure CSS portfolio gallery

Filtronio CSS3 portfolio is a great pure CSS and HTML5 gallery for showcasing your portfolio or even your products.

It’s simple but at the same time very powerful and professional portfolio gallery. You can choose from 3 different themes. Filtronio CSS3 portfolio also offers animated layers and category filter. Gallery is clean coded and easy to customize.

Check live demo here.


53. Pure CSS3 image Gallery

Pure-CSS3-image-gallery

Pure CSS3 image Gallery

This is a simple CSS3 image gallery that creates the effect of the pop up window, when you click on the image. It’s very suitable for showcasing portfolio on the websites. If you are interested, you can also follow the tutorial to make it by yourself.

Check out live preview.


54. CSS Lightbox image Gallery

CSS-Lightbox-Image-gallery

CSS Lightbox image Gallery-pure CSS

This image gallery is another pure CSS gallery. It that has the effect of an image zoom out on click. You can download the source code or if you feel like it go trough the tutorial.

CSS Lightbox image Gallery should be used on a non-scrollable website. However this can be overridden with a single line of JavaScript, that is included at the end of the tutorial.

The most suitable usage would be portfolio showcasing.

It’s really cool, so I think you should check it in action.


Bonus Mention: 1WD Recommended and Favorite jQuery Slider

55. Slidea ($14)

Slidea-jquery-image-slider

Slidea – A Smarter Responsive Slider Plugin

And here is a gem of this collection, Slidea. Slidea is a multi purpose content slider. This slider plug-in was build on the jQuery, VelocityJS and Animus animation framework. With Slidea there are no animation limitations, you can create such an awesomeness with it.

I can try to describe how cool it is, but just check the demo below and you’ll understand why I like it so much!

Here are a few characteristics:

  • Touch enabled
  • Material design ready
  • Fully responsive
  • Easy customisable
  • API and more…check their website for full list, as there is an endless list of features.

Check the live demo here.


Conclusion

I have to say I really enjoyed researching for these plug-ins. We found amazing sliders, that will, hopefully help you to work on your next project more efficiently. There has to be something for every situation and everybody.

There are so many amazing sliders and slideshows that is hard to decide what to pinpoint. But in my opinion you should definitely check out Gridder slider, because it’s really amazing what it can do and it’s free, so win-win situation.

And you definitely should not forget Slidea. Yes it’s a premium slider, but it carries so much value and awesomeness, well worth the investment!

If you enjoyed our article comment, share it with your friends and tell us if we missed some great slider.

Which is your favorite gallery plugin? Would love to hear your experiences!

Powered by WPeMatico

Create a Custom HTML5 Audio and Video Element UI with MediaElement.js

There are a lot of things you can create with custom HTML5. The new elements make it possible to simplify things as opposed in the past that you need to add CSS to make it work or display.

Two of the good examples are the audio and video elements. Although the audio and video element have a generic look, it can be customized using a jQuery plugin called MediaElement.js.

In today’s tutorial, you will code an audio and video player using the UI toolkits made by Rudolph Musngi, CSS3 to style the elements and the MediaElement.js for the functionalities.

OK, let’s start.

Resources You Need to Complete This Tutorial

Custom Audio Player

audio

Step 1 – Download jQuery library and MediaElement.js

To make all things work, you need to download, first, the jQuery Library or use Google’s Hosted Library.

Then, you also need the MediaElement.js script and extract it on your preferred location. Inside the folder of the extracted MediaElement.js, you need the following files:

  • mediaelement-and-player.min.js
  • flashmediaelement.swf
  • silverlightmediaelement.xap

Step 2 – Adding Necessary Links on the Head Section

To start, you need to add the following links to the Head Section. This includes the links to the CSS files, jQuery library and MediaElement.js.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Creating a Custom HTML5 Audio and Video Element UI with
    MediaElement.js</title>
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/audio.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>
</head>

Step 3 – The Markup

Now, create the div that will hold the audio element. You will give it a class of audio-player and inside it, you will put a paragraph element for the title and the audio element itself.

  	<div class="audio-player">
        <p>Michael Buble - Everything</p>
    	<audio id="audio-player" src="restheces/Michael Buble - Everything.mp3" type="audio/mp3" controls="controls"></audio>
  	</div>

Step 4 – The Script

Now that you had set up the audio markup, you need to add the code below before the ending of the tag.

Notice that you selected the class audio-player that you used to wrap the audio elements. These are the basic settings set for this tutorial; you can check out the mediaelement.js documentation to learn more about the available settings.

$(document).ready(function() {
    	$('#audio-player').mediaelementplayer({
        	alwaysShowControls: true,
        	features: ['playpause','volume','progress'],
        	audioVolume: 'horizontal',
        	audioWidth: 364,
   	     audioHeight: 70
    	});
	});

Step 5 – The CSS

Next, set up the styles of the custom audio player. First, add some reset styles to make sure that there are no other extra styles on each browser.

.audio-player,.audio-player div,.audio-player p,.audio-player a,.audio-player button {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

Then, style the player container and add the width a height on it and style the paragraph tag for the title.

.audio-player {
	position: relative;
    margin: 0 auto;
    background: #d14242;
	width: 426px;
    height: 120px;
}

.audio-player p {
    position: absolute;
    text-align: center;
    text-transform: uppercase;
	left: 143px;
	top: 62px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
	color: #fcc;
    font-weight: 700;
}

Next, style the play-pause button. This will be in a form of png sprite image and manipulated using the background-position.


.mejs-controls .mejs-button button {
    position: absolute;
    display: block;
	width: 73px;
    height: 71px;
	cursor: pointer;
    background: #961717;
}

.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {
	width: 115px;
    height: 120px;
    background: #961717 url(../img/playerbuttons.png) 0 0 no-repeat;
}

.mejs-controls .mejs-pause button {
    background-position: 0 -120px;
}

For the Mute and Unmute Control button, use a png sprite image and manipulate the background-position to display each part.

.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {
	width: 24px;
    height: 23px;
    background: transparent url(../img/mute-unmute.png) 0 0;
	top: 28px;
	left: 140px;
}

.mejs-controls .mejs-unmute button {
    background-position: 0 -23px;
}

Now, add the following styles for the volume slider. Notice that instead of using an image for the circle icon, CSS3 was used instead using the border-radius property.


.mejs-controls div.mejs-horizontal-volume-slider {
    position: absolute;
	top: 33px;
	right: 23px;
    cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 232px;
    height: 8px;
    background: #961717;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
	width: 0;
    height: 8px;
    background: #961717;
	top: 1px;
	left: 1px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

The CSS codes below will set the background color and dimension of the time loaded and current time.


.mejs-controls div.mejs-time-rail {
	width: 380px;
}

.mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
	width: 380px;
    height: 12px;
	top: 40px;
	left: 55px;
    cursor: pointer;
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    background: #e26060;
	width: 311px !important;
    height: 12px;
    margin-top: 68px;
    margin-left: 60px;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	top: 0;
	left: 0;
	width: 0;
    background: #961717;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	top: 0;
	left: 0;
	width: 0;
    background: #961717;
}

Next, add some styles for the time and volume sliders (handle).


.mejs-controls .mejs-time-rail .mejs-time-handle {
    position: absolute;
    display: block;
	width: 10px;
    height: 10px;
	top: 2px;
    background: #330202;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
	left: 11px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
    position: absolute;
    display: block;
	width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
	top: -2px;
    background: #330202;
}

Finally, add the styles for the Time Progress Bar tooltip. This will appear when you hover over the progress bar.


.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    z-index: 9999;
	color: fff;
	width: 33px;
    height: 23px;
	top: -26px;
    display: none;
    margin-left: -17px;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	width: 33px;
    display: block;
	left: 0;
	top: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
	color: #f89494;
    text-align: center;
    z-index: 9999;
    background: #bf3737;
    padding: 2px 2px 5px;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current:after {
    content: "";
    position: absolute;
	width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #bf3737 transparent transparent;
	top: 15px;
	left: 8px;
}

And that’s really it! Now that you’re done on the custom audio element. On the next part of this tutorial, you will create a custom video element.

Custom Video Player

video

Step 1 – Download jQuery library and MediaElement.js

Just like the custom audio element, you need to download first the jQuery library or use Google’s Hosted Library.

Then, you also need the MediaElement.js script and extract it.

The same with the custom audio element, you will again use following files inside the MediaElement.js folder:

  • mediaelement-and-player.min.js
  • flashmediaelement.swf
  • silverlightmediaelement.xap

Step 2 – Adding Necessary Links on the Head Section

Afterwards, you will add the following links to the head section. This will again include the links to the CSS files, jQuery library and MediaElement.js.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Creating a Custom HTML5 Audio and Video Element UI with
    MediaElement.js</title>
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/video.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>
</head>

Step 3 – The Markup

Now create the div that will hold the video element. You will wrap the video element in a class of video-player.

  <div class="video-player">
  <video width="490" height="276" poster="img/video-poster.jpg">
  <video src="resources/Pedestrian.mp4" type="video/mp4">
  </video>
 </div>

Step 4 – The Script

Now that you have the markup set up, add the code for the video controls and settings. Notice that you selected the video element and then used the following settings:

  • alwaysShowControls – This will display or hide the video controls using the true or false value.
  • videoVolume – This will display the volume slider horizontal.
  • features: [‘playpause’,’progress’,’volume’,’fullscreen’] – This set up the control for the video.

For this part, you will use the following settings but you can configure more settings by checking out MediaElement.js documentation page.


$(document).ready(function() {
    $('video').mediaelementplayer({
        alwaysShowControls: false,
        videoVolume: 'horizontal',
        features: ['playpause', 'progress', 'volume', 'fullscreen']
    });
});

Step 5 – The CSS

For the CSS, start by adding reset and basic styles to the elements.

.mejs-inner,.mejs-inner div,.mejs-inner a,.mejs-inner span,.mejs-inner button {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* General Styles */
.mejs-container {
	position: relative;
	background: #000;
}

.mejs-inner {
	position: relative;
	width: inherit;
	height: inherit;
}

.me-plugin {
	position: absolute;
}

.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video,.mejs-embed,.mejs-embed body,.mejs-mediaelement {
	width: 100%;
	height: 100%;
}

.mejs-embed,.mejs-embed body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.mejs-container-fullscreen {
	position: fixed;
	overflow: hidden;
	z-index: 1000;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.mejs-poster img {
	display: block;
}

.mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay {
	position: absolute;
	top: 0;
	left: 0;
}

.mejs-overlay-play {
	cursor: pointer;
}

.mejs-inner .mejs-overlay-button {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -82px;
	width: 158px;
	height: 158px;
	background: url(../img/playbutton.png) no-repeat;
}

Next, you will style the controls. The container will have a width of 100% and a position of absolute. You will use a png sprite image for the play and pause button and manipulate the display of each element using the background-position property.

.mejs-container .mejs-controls {
	left: 0;
	bottom: 0;
	background: #c94745;
	position: absolute;
	width: 100%;
	height: 15px;
}

/* Controls Buttons */
.mejs-controls .mejs-button button {
	display: block;
	cursor: pointer;
	margin-top: -8px;
	margin-left: -6px;
	width: 6px;
	height: 9px;
	background: transparent url(../img/play_pause.png);
}

/* Play & Pause Button */
.mejs-controls div.mejs-playpause-button {
	position: absolute;
	top: 12px;
	left: 15px;
}

.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {
    width: 6px;
	height: 9px;
	background-position: 0 0;
}

.mejs-controls .mejs-pause button {
	background-position: 0 -9px;
}

For this part of the CSS, let’s style the Mute and Unmute buttons. Again, you will use a png sprite image and manipulate its display position using background-position.


.mejs-controls div.mejs-volume-button {
    position: absolute;
	top: 12px;
	left: 45px;
}

.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {
	width: 11px;
    height: 11px;
    background: url(../img/mute_unmute.png)no-repeat;
    background-position: 0 0;
    margin-left: -14px;
    margin-top: -9px;
}

.mejs-controls .mejs-unmute button {
    background-position: 0 -12px;
}

Now, add some styles to the Full or Window Screen button. Similar with the play and pause button, for the Mute and Unmute button, you will use a png sprite image file to display each side of the full or window screen element.

.mejs-controls div.mejs-fullscreen-button {
	position: absolute;
	top: 7px;
	right: 7px;
}

.mejs-controls .mejs-fullscreen-button button,.mejs-controls .mejs-unfullscreen button {
	width: 10px;
	height: 10px;
	margin-top: -4px;
	cursor: pointer;
	background: url(../img/window_screen.png)no-repeat;
}

.mejs-controls .mejs-unfullscreen button {
	background-position: 0 -12px;
}

Self-explanatory, instead of setting up a pure background width element, you will set it up on an absolute positioning.


.mejs-controls div.mejs-horizontal-volume-slider {
	position: absolute;
	cursor: pointer;
	top: 6px;
	left: 47px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 60px;
	background: #330202;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	position: absolute;
	width: 0;
	top: 0;
	left: 0;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	height: 4px;
}

The Progress Bar will have basic styles. The loading rail has an extra feature with a class .mejs-time-loaded. This will display how much time the video file has been pre-loaded via streaming downloads.


.mejs-controls div.mejs-time-rail {
	position: absolute;
	top: -10px;
	height: 9px;
	width: 100%;
	left: 0;
}

.mejs-controls .mejs-time-rail span {
	position: absolute;
	display: block;
	cursor: pointer;
	width: 100%;
	height: 10px;
	top: 0;
	left: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
	background: #ef3a3a;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #630909;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	width: 0;
}

For the progress bar handle, you will simply create a small circle using the border-radius property with a background color of #ef3a3a.


.mejs-controls .mejs-time-rail .mejs-time-handle {
	position: absolute;
	cursor: pointer;
	width: 10px;
	height: 10px;
	top: 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #ef3a3a;
}

Next, you will style the tool tip that will show the current time on hover state. You will use basic CSS for this with the :after selector to create a small triangle pointing downward.


.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	width: 33px;
	height: 23px;
	top: -26px;
	margin-left: -17px;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	width: 33px;
	display: block;
	left: 4px;
	top: 4px;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-youight: 700;
	color: #f89494;
	text-align: center;
	z-index: 9999;
	background: #bf3737;
	padding: 2px 2px 5px;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: #bf3737 transparent transparent;
	top: 13px;
	left: 8px;
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
	display: none;
}

Finally, you will set up the background color of the Progress and Volume Bar.

.mejs-controls .mejs-time-rail .mejs-time-current,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: #7c0f0f;
}

Wrapping Up

There you have it! I hope you learned something from this tutorial, and turn the audio and video players into a fantastic modern design.

This can be done using pure CSS3 styles but it still has poor support, especially on the Jurassic browsers like Internet Explorer 8 and its older versions. The best way to go is to use JavaScript like this MediaElement.js plugin.

Feel free to use these codes on your projects. Let me know about your thoughts regarding this tutorial on the comment section.

Powered by WPeMatico

Energize Your Static Website with This WordPress Conversion Tutorial (Part 2)

Help!

That’s the first reaction you might have if you are trying to figure out your WordPress conversion tasks, right?

Even if you are just a beginner and not really a web expert, you can definitely create a WordPress theme for as long as you know how WordPress works.

If you’ve been using WordPress as your website platform, chances are, you’re tired of using generic WordPress themes for your site. You might even think of just doing your own theme to have your preferred styles and features.

Customizing Your WordPress site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Designing websites using Photoshop PSD files and then converting it to WordPress themes is one of the easiest shortcuts in web design and development today. It is the most ideal way to provide your client a site with small amount of time and with ease.

It is easy-peasy, believe it!

This tutorial will help you learn how to convert your HTML and CSS static site to a fully functional WordPress blog theme.

  • Converting HTML and CSS static site to WordPress theme will be your shortcut in web design and development. This means you can easily deliver your customer’s site at ease within a small amount of time.
  • Reading this tutorial, you can simply gain knowledge on how to create your own WordPress theme.

Disclaimer: You need to have a background knowledge about HTML, CSS, JavaScript and PHP.

Here Are Your Expected Results

At the end of this tutorial, you will learn how to convert your plain HTML and static site to a fully functional WordPress blog theme. This tutorial will give you insight about WordPress blog theme templates which we have stated in the first part of the tutorial.

This tutorial will encourage you to apply the following coding standards to your WordPress theme:

  • Validate your HTML and CSS codes first. You can use service like W3C’s validation site to ensure that your markup and styles are valid.
  • Ensure that your WordPress code syntax won’t cause any issues. You can always visit this site to check your codes if it aligns to the WordPress Coding Standards.
  • Always test your code on all browsers if possible. Check if your site works across all major browsers to avoid any further issues on your theme.
  • Test your code on multiple devices. As mobile and tablets users grow it is ideal if you would check if your site is responsive and is working across modern devices.

What You Have Learned So Far

In part one of this tutorial we’ve worked on the following:

  • Copying files to the NeoBlog WP directory
  • style.css
  • screenshot.png
  • Activating the theme

If you’ve been following this tutorial, the WordPress theme was named via style.css and a screenshot was added for the theme to be identifiable at the WordPress admin panel.

After doing this, the theme was activated. Really, there are more things to do. Familiarize with the steps covered in the first part of this series to enjoy this second serving for you will be learning things a notch higher.

More focus would be on the rest of the WordPress templates that have defined on the first part of this tutorial.

OK, without further do, let’s finish the remaining templates so that a fully functional WordPress theme can be achieved.

What You Should Expect

To be specific, you will work on the following:

  • functions.php
  • header.php
  • footer.php
  • searchform.php
  • sidebar.php
  • index.php
  • single.php
  • page.php
  • page-about.php
  • page-contact.php
  • page-contact.php
  • search.php
  • content-search.php
  • comments.php
  • 404.php

Resources You Need

What’s the Fuss about This Tutorial

In the first part of this series, you were how to prepare your HTML and CSS files for WordPress and then brand and activate the theme.

In this last part of the series, you will learn what codes each remaining WordPress template must have to build a working WordPress theme.

At the end of this tutorial, you will have the same output just like the demo image file we posted in part 1 of the series.

STEP 1 – Defining constants and registering navigation menu support

The theme is already active! Now add support to the theme directory as well as the navigation menu thru the functions.php. Go ahead and create the functions.php file first on the root directory of the NeoBlog WP theme.

Next, define the constants for the theme directory. Go ahead and copy the code below to the functions.php recently created.

(Note: Since this is a php file all of the functions and codes relating to php must be enclosed with < ?php ?> tag.)

/***********************************************************************************************/
/* Define Constants */
/***********************************************************************************************/
define('THEMEDIR', get_stylesheet_directory_uri());
define('IMG', THEMEDIR.'/images');

You also need to register a function for the navigation menu. Below are the functions needed to make a working navigation. Go ahead and grab it.

add_action('init', 'register_my_menus');
 function register_my_menus() {
   register_nav_menus(array(
       'main-menu' => 'Main Menu'
      ));
}

An add_action hook has been added to register the navigation menu. The first argument is the tag (to which the action will be added later) and the second argument specifies the register_my_menus function to call.

To learn more about this, check this page.

STEP 2 – Creating header.php

Now, create the header.php file. Open index.html and copy everything from the opening DOCTYPE declaration to the ending tag and then paste it into the header.php file created on the NeoBlog WP theme folder.

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>NEOBLOG</title>
<meta name="description" content="A simple WordPress blog theme for 1stwebdesigner.com">
<meta name="author" content="Sam Norton">

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- HEADER -->
<header class="main-header align-center ">
<a href="index.html" class="logo" ><img src="images/logo.png"  class="img-responsive" alt="NEOBLOG blog theme" /></a>
<nav class="main-nav">
<ul class="inline">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

Some of static HTML tags can be replaced by the WordPress built-in functions such as the language, meta information, body class and so on.

Add the wp_head hook before the closing head tag. Use this hook by having the function echo the output to the browser, or by having it perform background tasks. For more information about this, see the WordPress Codex.

For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.

The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.

To learn more about the wp_nav_menu, check this page.

Copy the code below and replace the static html header information just copied.


<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->

<head>
<meta charset="<?php  bloginfo('charset'); ?>">
<title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta name="author" content="Sam Norton">

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- HEADER -->
<header class="main-header align-center ">
<a href="<?php echo home_url(); ?>" class="logo" ><img src="<?php print IMG;?>/logo.png"  class="img-responsive" alt="<?php bloginfo('name');?>" /></a>

<nav class="main-nav">
<?php
   wp_nav_menu(array(
     'theme_location' => 'main-menu',
      'container' => '',
      'menu_class' => 'inline'
));
?>

</nav>
</header>

STEP 3 – Creating footer.php

For this part, create the blank footer.php and once again open index.html from the NeoBlog HTML and CSS theme folder. Copy everything from the sharing idea section to footer section. Then paste it to the footer.php file on the NeoBlog WP theme folder.

You must have the same HTML codes below.

<!-- SHARING IDEAS AREA -->
<section>
<div class="sharing-container section-content align-center">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>

<p>Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.</p>
<h4><a href="contact.html" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>

<!-- FOOTER -->
<footer class="main-footer section-content align-center" id="contact-info">
 <p>&copy; 2014 - <a href="http://www.1stwebdesigner.com/" target="_blank">NEOBLOG theme</a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a></p>
</footer>
</body>
</html>

Same with header.php file. Again, replace some of these HTML tags to the WordPress built-in functions such as the link to the homepage, the current year and the blog name information.

Check out the codes below.

<!-- SHARING IDEAS AREA -->
<section>
<div class="sharing-container section-content align-center">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>

<p>Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.</p>
<h4><a href="<?php home_url(); ?>" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>

<!-- FOOTER -->
<footer class="main-footer section-content align-center" id="contact-info">
<p>&copy; <?php echo date('Y'); ?> - <a href="<?php home_url(); ?>"><?php echo bloginfo('name'); ?></a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a></p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

STEP 4 – Working with searchform.php

Next on the list, add the markup (with built-in WordPress functions), which will display a search box on the sidebar. Go ahead and create searchform.php and copy and paste the code below on it.

(Note: Most of the classes you see here came from the search box markup of index.html file)

<div class="controller">
<form role="search" method="get" class="search-form" action="<?php echo home_url(); ?>">
<input type='textbox' name="s" class="form-control" id="search-box" value="<?php the_search_query(); ?>" placeholder="Search.."/>
<input class="btn btn-primary no-border" type="submit" class="search-submit" value="Search" />
</form>
</div>

Notice that the the_search_query function as the value of the text box was used. This will simply display the search query for the current request, if a search was made.

STEP 5 – Working sidebar.php

Before creating the sidebar.php, register the sidebar on functions.php file. Go ahead and open functions.php and add the codes below on it.

register_sidebar( array(
    'id' => 'main-sidebar',
    'name' => __( 'Main Sidebar', $text_domain ),
    'description' => __( 'This the main sidebar.', $text_domain ),
) );

The codes above will build the definition for a sidebar and returns the ID.

Next, let’s call the sidebar. Create the sidebar.php file on the root directory of the NeoBlog WP theme and paste the codes below.

<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

The codes above contain function that calls main-sidebar widget callbacks and prints the markup for the sidebar but, first, it will test if the sidebar is active before proceeding.

STEP 6 – Populating the Index File

After adding all of these template files, work on the Home Page – the index.php file. Go ahead and create first the index.php on the root directory of the NeoBlog WP theme.
Now, put some codes on thew index.php file to display the changes.


<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now, let’s now check out the front page of the NeoBlog WP theme and see results.

temp

Notice that the header and the footer are on their proper positions except for the sidebar.

To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar codes below.


<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">

<ul class="negative-margin">
<li>
<h1><a href="single-blog.html" class="gray">Should I use a Pencil or a Ballpen?</a></h1>
<p class="details">By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Hacks</a></p>

<figure>
<img class="opacity-hover box-layer img-responsive" src="images/thumb1.jpg" alt="Pencil or Ballpen" />
</figure>
<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>	

<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>
</li>

<li>
<h1><a href="single-blog.html" class="gray">How to test your patience!</a></h1>
<p class="details">By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Tips</a></p>

<figure>
<img class="box-layer img-responsive" src="images/thumb2.jpg" alt="Pencil or Ballpen" />
</figure>

<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>	

<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>
</li>

</ul>

<div class="box-layer align-center page-nav">
<ul class="btn">
<li><a href="#">Next Page >>> </a></li>
</ul>
</div>
</div>

The codes above will only show a static display of the theme. To make this dynamic, structure the WordPress loop within the markup of the blog area. Copy the code below and replace the blog area just copied from index.html file.


<?php get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">

<?php if (have_posts()) : ?>
<div class="row">
 <div class="col-md-8">

<ul class="negative-margin">
 <li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>

<p class="excerpt"> <?php the_excerpt(); ?> </p>
<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>

<?php endif; ?>
 <?php endwhile; ?>

</ul>

<?php
global $wp_query;

if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->

<?php endif; ?>

<?php endif; ?>
</div>

<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</div>
</div>
</div>
</section>

<?php get_footer(); ?>

The WordPress loop are PHP blocks of code used by WordPress to display posts. Using the loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within the loop tags. The WP loop usually comes with these blocks of PHP codes:


<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>

The codes above is the basic loop along with the markup; however, it has to display the blog information using the following WordPress functions:

  • the_permalink – Displays the URL for the permalink to the post currently being processed in the loop
  • the_title – Displays or returns the title of the current post
  • the_author_posts – Displays the total number of posts an author has published
  • the_author – Displays the name of the author of the post
  • get_the_date – Retrieves the date the current $post was written
  • the_category – Displays a link to the category or categories a post belongs
  • the_post_thumbnail – Displays the Featured Image for the current post, as set in that post edit screen (more on this below)
  • the_excerpt – Displays the excerpt of the current post after applying several filters to it, including auto-p formatting which turns double line-breaks into HTML paragraphs

With regards to the featured image, use the code the following codes.

<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<?php endif; ?>

First, test it if there is a featured image set on the WordPress post panel. If the statement is true, it displays the URL of the post and the featured image itself.

Notice that an array is added with a class opacity-hover box-layer img-responsive. This is a way of adding a class in the Featured image to make a nice hover, border and box shadow on it.

But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the codes below and paste it into the functions.php.

/***********************************************************************************************/
/* Add Theme Support for Post Thumbnails */
/***********************************************************************************************/
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(742, 428);
}

Great! The featured image will now appear. Next, add function to remove brackets, ellipsis or the hellip word at the end of the excerpt (which is the default display of the excerpt).

Open the functions.php and add again the following codes.

/***********************************************************************************************/
/* Remove the brackets, ellipsis and hellip on excerpt */
/***********************************************************************************************/
function trim_excerpt($text) {
 	$text = str_replace('[&hellip;]', '...', $text);
     return $text;
	}
add_filter('get_the_excerpt', 'trim_excerpt');

Next, you will tinker the page navigation that was already added on the index.php file. The following code will call the wp_query, a class defined in the WordPress core that deals with the intricacies of a posts (or pages) request to a WordPress blog.

It will then set the previous_post_link and next_posts_link function to add a navigation to the blog post list.

Check out the code below:


<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>
<?php endif; ?>

As a final touch, place the get_sidebar function inside the col-md-3 col-md-offset-1 margin-sidebar div along with an HTML5 aside tag to make it float on the right side of the page.

Check the code the below.

<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

As a review, the index.php will contain all of the following PHP codes. Check out the code to avoid missing something.


<?php get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<?php if (have_posts()) : ?>
<div class="row">

<div class="col-md-8">

<ul class="negative-margin">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray">
<?php the_title(); ?> </a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>

<p class="excerpt"> <?php the_excerpt(); ?> </p>
<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>
<?php endif; ?>
<?php endwhile; ?>

</ul>

<?php
 global $wp_query;

if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->

<?php endif; ?>

<?php endif; ?>
</div>

<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</div>
</div>
</div>
</section>

<?php get_footer(); ?>

STEP 7 – Working with single.php

Now, to display each individual posts in a blog page, create the single.php file and then copy and paste the code below.


<?php  get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />

<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<section>

<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  In <?php the_category(', '); ?> </p>

<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>

<p class="excerpt"> <?php the_content(); ?> </p>
<?php endif; ?>
</section>

<?php endwhile; ?>
<?php endif; ?>

<section>

<div class="comment-section">
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() ) : comments_template();
endif;
?>

</div>
</section>
</div>

<!-- RELATED ARTICLE AREA -->

<section>
<div class="box-layer related-articles custom-padding">
<h2 class="align-center">Related Articles</h2>
<?php
$current_categories = get_the_category();
$first_category = $current_categories[0]->term_id;

$args = array(
 'post_per_page' => 3,
 'category__in' => array($first_category),
 'post__not_in' => array($post->ID)
);

$related_articles = new WP_Query($args);
if ($related_articles->have_posts()) : ?>

<ul>

<?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?>
<li class="col-md-4">
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
</figure>

<p class="related"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php endif; ?>
</li>
<?php endwhile; ?>

<div class="clear"></div>
</ul>
<?php endif; ?>

<?php
// Restore original Post Data
wp_reset_postdata();
?>

</div>
</section>
</div>

<!-- SIDEBAR AREA -->
<aside>

<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</section>

<?php  get_footer(); ?>

There is for the comment section. Check out the codes below.

<section>

<div class="comment-section">
<?php
if ( comments_open() || '0' != get_comments_number() ) : comments_template();
endif;
?>
</div>
</section>

This code will check if comments are open or at least have one comment. It will load up the comment template (more on the comment template later).

STEP 8 – Working with page.php

After working on the blog page, work on the regular pages. Create the page.php file and then copy and paste the code below.


<?php get_header(); ?>

<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">

<div class="col-md-8">
<div class="box-layer custom-padding">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2> <?php the_title(); ?> </h2>

<?php
if (has_post_thumbnail()) : ?>
                                                                                                           	 <figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>

<?php	endif; ?>
<p><?php the_content(); ?> </p>
<?php endwhile; endif; //ends the loop ?>
</div>
</div>

<!-- SIDEBAR AREA -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php  get_sidebar(); ?>
</div>
</aside>

</section>
<?php get_footer(); ?>

Again, there is nothing new to this file except that it doesn’t have the comment section since this is a regular page.

In the next 2 files, create 2 WordPress built-in Post Types template. These are pages that display page layout differently.

STEP 9 – Working with page-about.php

For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML codes along with the header, sidebar and footer.

Add a comment at the beginning of the page-about.php file to make sure WordPress will treat the file as a page template.

Copy the codes below and paste it to the page-about.php file.


<?php
/* Template Name: About Page */
?>

<?php  get_header(); ?>

<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">

<img src="<?php print IMG; ?>/my_image.png" class="opacity-hover img-responsive center" alt="my image" />
<div class="align-center">

<h2>About Me</h2>
<p>I am a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. I spend most of my time practically every day, experimenting with HTML, CSS and WordPress.<p>
<hr/>

<h3 class="blue">Feel free to contact me for some Web Projects</h3>
<p><i class="fa fa-envelope"></i>  Email: [your email] </p>
<p><i class="fa fa-twitter"></i>  Twitter: [your twitter username] </p>
</div>
</div>

<!-- END RELATED ARTICLE AREA -->
</div>

<!-- SIDEBAR AREA -->
<aside>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>

</section>
<?php  get_footer(); ?>

STEP 10 – Working with page-contact.php

Many WordPress plugins can add a contact form to the blog, but a plugin is sometimes unnecessary. For the page-contact.php file, add a little bit of PHP and JavaScript codes. First, go ahead and create the page-contact.php file.

Now, create a simple contact form. Simply paste the following code on the page-contact.php.

<?php
/*
Template Name: Page Contact
*/
?>

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '')  {
$emailError = 'Please enter your email address.';
$hasError = true; } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['subject']) === '') {
$subjectError = 'Please enter a subject.';
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {                            	

if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}

$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name nnEmail: $email nnComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email;

wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>

What has been done here is simply to make sure that the form has been submitted and filed correctly. If an error, such as an empty field or incorrect email address occurrs, a message is returned and the form isn’t submitted.

Next, create the form and display the error messages below each text box and text area field.


<?php get_header(); ?>
<section>
<hr class="no-margin" />
 <div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">

<div id="container">
<div id="content">
<div class="align-center">
<h2>We want to hear from you!</h2>
<p>If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. </p>

<p>Thank you so much for your support!
<br/>We really appreciate!</p>

<div class="entry-content">
<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">                                                                                                            	<p>Thanks, your email was sent successfully.</p>
</div>

<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
                                                                                                                            	<p class="error">Sorry, an error occured.<p>
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post" class="general-form">
                                                                                                            	<div class="contactform">
<p>

                                                                                                                            <input type="text" name="contactName" class="form-control" id="contactName" placeholder="Your Name.." value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                                                                                                            	<?php if($nameError != '') { ?>
                                                                                                                                            	<span class="error"><?=$nameError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>
                                                                                                                           	<input type="text" name="email" id="email" class="form-control" placeholder="Your Email.." value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                                                                                                            	<?php if($emailError != '') { ?>
                                                                                                                                            	<span class="error"><?=$emailError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>
                                                                                                                           	<p>
                                                                                                                            	<input type="text" name="subject" id="subject" class="form-control" placeholder="Your Subject.." value="<?php if(isset($_POST['subject']))  echo $_POST['subject'];?>" class="required requiredField subject" />
                                                                                                                            	<?php if($subjectError != '') { ?>
                                                                                                                                            	<span class="error"><?=$subjectError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>
                                                                                                                     	<textarea name="comments" id="commentsText" class="form-control" placeholder="Your Message" rows="4" cols="100" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                                                                                                            	<?php if($commentError != '') { ?>
                                                                                                                                            	<span class="error"><?=$commentError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	</p>

<p><input type="submit" class="btn btn-primary no-border" value="Send Message"></input></p>
</div>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- .post -->
</div>
</div>
</div>

<!-- RELATED ARTICLE AREA -->
</div>
<aside>
<!-- SIDEBAR AREA -->
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</aside>
</section>

<?php get_footer(); ?>

The form is now working but you can enhance it further by adding client side verification. To do this, use jQuery and the validate jQuery plugin.

First, download the validate plugin and then place it on the js directory on the NeoBlog WP theme.  Add the following links to the header.php file before the closing head tag.


<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

Now, create the verif.js file and put the jQuery code to enable the validation. Here are the codes:


$(document).ready(function(){
$("#contactForm").validate();
});

Great! The contact form has just been created. The form will now validate every input and simply picks a form element with class required and verifies if the form is properly filled.

Note: Use a plugin if doing the coded above is too difficult.

Try Contact Form 7, a very powerful and flexible plugin that adds a contact form to the pages.

STEP 11 – Assigning page templates to pages

Cool! The page templates have been created. To make them work, assign them to a page.

For this part of the tutorial, create first a page from the WordPress admin panel and then assign a page template to it.

To do this, go to Pages -> Add New and then give it a title About or Contact.

pages

Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.

page-attributes

Now you can check the page if it works in the front-end.

STEP 12 – Working with search.php

The structure of the search box is now set up but it is not working yet; it needs some functions to make it work.

For this part of the tutorial, add the functionality to enable the search query on the search box.

The codes below will have some PHP codes for the search to output the results; otherwise, it will return an error message: “Bummer! No results found”, which is wrapped in an H2 tag.

Create first the search.php file and grab the following code below on it. Otherwise, if there is a result returned, it will display the result within an H2 tag.

Note: The codes below contains HTML tags based on the page.php and single.php


<?php get_header(); ?>
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">

<?php if ( have_posts() ) : ?>
<header class="page-header">
<h2 class="page-title"><?php printf( __( 'Search Results for: %s', '_s' ), '<h3>' . get_search_query() . '</h3>' ); ?></h2>
</header><!-- .page-header -->

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

 <?php
 /*** Run the loop for the search to output the results. */
get_template_part( 'content', 'search' );
?>

<?php endwhile; ?>
<?php else : ?>

<h2>Bummer! No results found</h2>
<?php endif; ?>

</div>
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
</section>

<?php get_footer(); ?>

STEP 13 – Working with content-search.php

The search.php will control the layout of the search results; however, add the loop of the search to output the results.

For this part, create the content-search.php file on the NeoBlog WP theme directory and then paste the code below on it.


<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">

<?php the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>

<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php endif; ?>
</header>

<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  <?php the_category(); ?> </p>
<p><?php the_excerpt(); ?></p>

</div>

STEP 14 – Working with comments.php

To check again the single.php file, notice that there is a part on that file that contains a div class of comment-section along with some PHP codes.

See code below.


<div class="comment-section">
<?php
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;                                                                                                                       	?>
</div>

These codes will simply check if the comments are enabled on the WordPress admin panel using an if statement. If it returns true, it will get the number of comments and simply display all comments returned.

Take note these codes alone won’t yet display comments, one needs to create the comment_template, using the comments.php file. For this part of the tutorial, go ahead and create this file on the NeoBlog WP theme directory.

Now copy the code below and paste it on the created file.


<?php
/**
 * The template for displaying comments.
 *
 * The area of the page that contains both current comments
 * and the comment form.
 *
 * @package NeoBlog
*/
/*
 * If the current post is protected by a password and
 * the visitor has not yet entered the password we will
 * return early without loading the comments.
 */

if ( post_password_required() ) {
return;
}
?>

<div id="comments" class="comments-area">
<?php // You can start editing here -- including this comment! ?>
?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php printf( _nx( 'One Comment on &ldquo;%2$s&rdquo;', '%1$s comment on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), '<h3>' . get_the_title() . '</h3>' );
?>
</h2>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-above" class="comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-above -->
<?php endif; // check for comment navigation ?>

<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
));
?>
</ol><!-- .comment-list -->

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below" class="comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-below -->
<?php endif; // check for comment navigation ?>

<?php endif; // have_comments() ?>

<?php
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
?>
<p class="no-comments"><?php _e( 'Comments are closed.', '' ); ?></p>
<?php endif; ?>
<?php

$fields =  array(
        'author' => '<p class="general-form">'.'<input class="form-control"  placeholder="Your Name.." id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '<p class="general-form">'.'<input id="email" class="form-control" placeholder="Your Email.."  name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
        'url'   => '<p class="general-form">' . '<input id="url" class="form-control" placeholder="Your Website.." name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'
	);

$comments_args = array(
'fields' =>  $fields,
 'title_reply'=>'<h2>'.'Leave a Comment'.'<h2>',
'comment_field' => '<p class="general-form"><textarea id="comment" class="form-control" name="comment" rows="4" cols="100" aria-required="true" placeholder="Write your comment here.."></textarea></p>',
'comment_notes_after' => '',
 'id_submit' => 'submit-btn'
);

?>

<?php comment_form($comments_args); ?>
</div><!-- #comments -->

There are a lot of things happening on this file. First, it will test if the post needs a password for the user to be able to comment. Next, if it returns true, the comments number and comments will be displayed.

Notice that there is also a navigation to see the comments (both previous and next) using the previous_comments_link and next_comments_link function.

Finally, use wp_list_comments to display all comments for a post or page based on a variety of parameters, including the ones set in the administration area.

Next, add some wp_enqueue_script to check if the threaded comment is enabled. If it returns true, it will enable comment reply. Open up your functions.php and copy the code below on it.


if( get_option('thread_comments') ){
wp_enqueue_script('comment-reply');
}

STEP 15 – Working with 404.php

Creating a custom 404 page is easy using the 404.php template in a WordPress theme. This will make sure that every link actually goes to a specific web page. If there is a broken link, it will display this page.

For this part of the tutorial, create a simple 404 page template. Copy the code below.


<?php  get_header(); ?>

<!-- BLOG AREA -->

<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box-layer custom-padding">
<section>
<h2> Oh Snap! Page not found!</h2>
<h3> It seems you're looking for something that isn't here!</h3>
<p> <a href="<?php echo home_url(); ?>">Click here</a> to go back to homepage! </p>
</section>
</div>

 </div>
<aside>
<!-- SIDEBAR AREA -->
<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>                                                                                                        	</div>
</aside>

</section>
<?php  get_footer(); ?>

A 404 ‘Not Found’ error page is a page generated by the server to inform a user about non-existing page.

On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.

The NeoBlog WordPress theme is now complete! Congratulations!

Our Final Project

Final_theme

 

[Download Source]

Tips You Ought to Remember for This Part of the Tutorial

  • Always check out the WordPress Codex for functions, tags and PHP codes. This will keep you on the right path in dealing with codes.
  • Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
  • Follow design guidelines in site design and layout.
  • Always Backup your files. Always, always backup your files just in case you made changes on a template file so that you can easily retrieve it later.
  • Seek for help. If you are working on a different theme, chances are you might have some issues while converting some files. I recommend asking help in Stackoverflow community, which is a community of developers helping each other’s codes issues.

What Troubleshooting Techniques You Can Use

There is not really an official rule to check on errors while you are developing a theme. It might be your own codes or some typographical error you just missed on your WordPress templates.

However turning on the Debugging mode or checking your error log might help.

Before You Leave

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 2 of this tutorial series, you need to watch the whole playlist.

Round-up

Congratulations! You just converted an HTML and CSS template into WordPress blog theme. That was easy, right?

You’ve successfully converted your plain static HTML and CSS NeoBlog theme to a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Clear Conclusion

Congratulations! You just converted an HTML and CSS template into WordPress blog theme on full. That was easy, right?

Now you have a fully functional WordPress blog theme that can pull and display content from a database.

You can also add more functionalities and styles on it by just browsing the WordPress codex to check all the functions you need.

If you have any comments or suggestions, please feel free to drop a line in the comment section.

Hope you learned something on this tutorial and see you again next time!

Powered by WPeMatico

Image Caption Animation with CSS3 Transform and Transitions

jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects.

That being said, it is now possible to do the same cool effects with CSS3 transitions and transform properties.

Today I want to show you how you can create cool animation hover effects with CSS3 animation. The images used in the demos were illustrated by Rudolph Musngi.

screen

Demo

Resources You Need to Complete This Tutorial

The Markup

With HTML5, you can now semantically wrap your images and captions using the figure and figcaption elements. For all the examples, use the same HTML markup. Wrap the images and figcaption contents with a figure element.

<figure>
        <img alt="nerd girl" src="img/img3.jpg">

        <figcaption>
            <h3>I love this title!</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <p><a href="#">Read More</a></p>
        </figcaption>
    </figure>

The CSS for Demo 1

For the CSS, the figure element will have a relative positioning. In this case, the captions and the images inside can be stacked over each other via absolute positioning. Then, we will put some basic styles on each element.

Notice that transform property – rotate on and transition property of the figcaption style are used. This will give a nice rotation and smooth effect for the caption. Some of the elements like H3 and paragraph tags will have a transition-delay property so that there will be a delay on the entrance of each elements for the caption.

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
            	top: -100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	left: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1.3s;
	-moz-transition-delay: 1.3s;
	-o-transition-delay: 1.3s;
	-ms-transition-delay: 1.3s;
	transition-delay: 1.3s;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 2

Using the same property as above for the figure, figcaption and some basic elements, remove the transform property – rotation to from the figcaption element and the transition-delay property to all of the elements except to the figcaption element. As a result, you will have smooth fading hover effects.

img {
	width: 100%;
}
figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
    border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 3

For the third demo, create a zooming effect for the image. For the image element, use the transform property – scale to change the size of the image when the mouse-over state is triggered. We will also put the transition-delay and transition properties on both figcaption and image elements.


img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure img {
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-o-transition: all 1.5s;
	-ms-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 4

Lastly, for this demo, create cool sliding effect. You will have almost similar CSS, like the third demo. This time, you will be adding a top property position on the figcaption but without the rotation.

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 250px;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

Conclusion

And that’s it! I hope you enjoyed and learned something on this tutorial. I am hoping that you also got inspired to design more amazing image caption hover effects using CSS3 transform and transition-delay property.

Powered by WPeMatico

Dress Up Your Site: How to Customize WordPress Themes

You’ve already installed your favorite WordPress theme on your site, but you feel that it needs to be tweaked a bit to make it look better, which leads you to  ask “How does one customize WordPress Themes?”

If you’re new to WordPress, you might think that it is hard to customize a WordPress theme because the thought about the codes scares you.

Although customizing a WordPress theme seems like rocket science, there are many simple ways to customize the look and feel of your site without breaking the theme. In fact, there are even some tools on Web that you can use to make the customization process easier and faster.

This article serves as a guide to teach you how to modify WordPress Themes the smart and easy way by using a child theme.

Why Use a Child Theme?

You might be wondering why you need to use a Child Theme instead of directly customizing the parent theme. Creating a child theme is the safest way to customize a theme. This will make sure that, if you accidentally get some issues on your site while on the process of customizing it, you can simply turn it off.

If you want to learn more about child theme, you might want to check this previous article about child themes

Customizing a WordPress Theme

On this part of this article, see how to customize a theme using a Child Theme. For the sake of this tutorial, the built-in NeoBlog WP theme (please free to download it and install it on your WordPress installation) is used as with the previous tutorial about converting HTML and CSS to WordPress. You will focus on the following customization:

  • Customizing link (anchor tag) attributes
  • Customizing the buttons
  • Re-positioning elements

Without any further do, let’s get started.

STEP 1- Creating a Child Theme Folder

To start off, you need to create our child theme folder. Inside the theme’s folder: wp-content/theme, create a new folder with the word “-child” attached on it.
Since the NeoBlog WP theme is used, the child theme folder will be “NeoBlog-child“.

neoblog-child

STEP 2- Creating the Stylesheet

Next, create a style.css file within the “Neoblog-child” theme folder. This file will need some information place into it so that it can be identified as a child theme.

Add the following code inside the style.css file.

/*
Theme Name: NeoBlog Child Theme
Theme URI: http://www.1stwebdesigner.com/
Description: NeoBlog Child Theme
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Template: NeoBlog
Version: 1.0.0
*/

@import url("../NeoBlog/style.css");
/* =You can start customizing your theme here

STEP 3- Using DevTools

OK, the child theme is already created, but how would you know which part of the code to customize? Where can you check which part of the CSS was used on the theme?

Believe it or not, web browsers like Google Chrome and Mozilla Firefox has this built-in DevTools that you can use to make changes on your site without any risks.

How to use DevTool for Chrome

As mentioned previously, both Google Chrome and Mozilla have this built-in DevTools but for this tutorial, just focus on Google Chrome since it is the most widely used web browser.

To turn it on simply Ctrl + Shift + I on Windows OS or Cmd + Opt + I on Mac OS. You can also simply right click and click on inspect elements. Now that you have turned it on, your screen should look this.

inspector

STEP 4- Customizing Link Attributes

Now with the Inspector Tool open, start hovering your mouse cursor around the NeoBlog theme front page. Notice that when you click on a particular element or tags, it shows the CSS on the right side.

For this part of the tutorial, let’s see how you can customize the color of the links to light green color (hex color: #2ecc71).

Go ahead and hover your mouse on the anchor link tags you see on the posts detail.

link

style

Notice that on the right side, there it has a style that looks like this:

p a {
color: #3498db;
text-decoration: none;
-webkit-transition:color .2s ease-out;
   -moz-transition:color .2s ease-out;
     -o-transition:color .2s ease-out;
        transition:color .2s ease-out;
}

You don’t need to copy all these styles on your style.css inside the NeoBlog-child folder. Since you are just changing the color, copy the color attribute along with its tag. Your CSS would look like this:

p a {
color: ##2ecc71;
}

Great! That’s how easy it is to change or modify the color. You can also change other attributes like the font-size, font face and so on. Feel free to navigate on Chrome’s Inspector Tool.

STEP 5- Customizing the Buttons

Now that you have successfully customized the links, let’s now see how you can customized the styles of the buttons.

Go ahead and navigate on the buttons tag on the Inspector tool. You will notice that the button element comes in an anchor tag with some classes. It was also wrapped in a div class btn-margin. See the code below.

<div class="btn-margin">
        <a class="btn btn-primary" href=
        "http://localhost/themewp/blog/2014/07/11/when-you-are-expecting-something/">
        CONTINUE READING &gt;&gt;&gt;</a>
    </div>

If you are going to hover your mouse on the anchor tag inside the div class btn-margin, you’ll see the CSS on the right side panel of the Inspector tool. You’ll see the style like this.


.btn-primary {
    font-family:'Nexa Bold';
    background-color:#3498db;
    color:#fff;
    font-size:16px;
    font-weight:700;
    height:48px;
    -webkit-box-shadow:inset 0 -3px 0 0 rgba(0,0,0,0.2);
    -moz-box-shadow:inset 0 -3px 0 0 rgba(0,0,0,0.2);
    box-shadow:inset 0 -3px 0 0 rgba(0,0,0,0.2);
    padding:12px 20px;
    text-transform:uppercase
}

Now, if you want to change the color, padding or font, you just need to copy and paste the attribute you want to change. For instance if you want to change the background color your code will look like this:

.btn-primary{
background-color: [the color];
}

STEP 6- Re-positioning Elements

If you want to re-position elements, you might need to change the floats of the elements or it might also require some WordPress template tweaking.

Let’s say, you want the excerpt to appear above the featured image. Then, you need to copy the index.php file on the parent’s theme folder to the child theme folder you created and change the position of the elements on the actual code.

This might be intimidating but not that really hard. You have this code on the original index.php file:


<?php get_header(); ?>
<!-- BLOG AREA -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
  <?php if (have_posts()) : ?>
  <div class="row">
 <div class="col-md-8">
      <ul class="negative-margin">
<li>
<?php while(have_posts()) : the_post(); ?>
 <h1><a href="<?php the_permalink(); ?>" class="gray">
 <?php the_title(); ?>
  </a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
<p class="excerpt"> <?php the_excerpt(); ?> </p>
   <div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
        </li>
<?php endif; ?>
<?php endwhile; ?>

</ul>
<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>

 <?php endif; ?>
 </div>

<aside>
 <div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
   </div>
</aside>
    </div>
</div>
</div>
</section>
<?php get_footer(); ?>

Then you’ll just need to transfer the_excerpt function on the top of the the_post_thumbnail function. Your code would look like this.

<?php get_header(); ?>

<!-- BLOG AREA -->
<section>
<hr class="no-margin" />
<div class="blog-container section-content">
<div class="container">
  <?php if (have_posts()) : ?>
  <div class="row">

    <div class="col-md-8">
<ul class="negative-margin">
<li>
<?php while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" class="gray">
<?php the_title(); ?>
 </a></h1>
<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p>

 <p class="excerpt"> <?php the_excerpt(); ?> </p>
<?php if (has_post_thumbnail()) : ?>
<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>

<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
</li>
 <?php endif; ?>
<?php endwhile; ?>

</ul>
<?php
global $wp_query;
if ($wp_query->max_num_pages > 1) : ?>
<div class="box-layer align-center page-nav">
<ul class="btn">
<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>
<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>
</ul>
</div> <!-- end box -->
<?php endif; ?>

<?php endif; ?>
 </div>

<aside>
   <div class="col-md-3 col-md-offset-1 margin-sidebar">
   <?php get_sidebar(); ?>
   </div>
</aside>

    </div>
</div>
</div>
</section>
<?php get_footer(); ?>

Wrapping Up

There are number of ways to customize your themes and some might need a little bit of tweaking on the WordPress templates to suit your needs.

Although sometimes the changes you want to make on your theme might require some coding knowledge. If it breaks something, you can simply turn off the child theme.

Have you started customizing your theme and have any tips to share? Please feel free to share to us on the comments section.

Powered by WPeMatico