Auto Added by WPeMatico

PSD to HTML Tutorial: The Only Guide You Need in 2016

This article is supposed to be your ultimate PSD to HTML learning resource. We have more than 5 unique text and video coding tutorials in this article as well as additional 30 3rd-party PSD to HTML conversion tutorials. You will learn how to create HTML websites and convert your Photoshop designs in no time!

At the end of article, we also included more tutorial sites you can use to deepen your coding knowledge.

We have lots of different coding tutorials here, but let me start with the most complete video tutorial series, that will teach you how to design a website in Photoshop. Then you will learn how to convert this Photoshop design into HTML.

And finally after we are done with HTML coding part, we’ll teach you how to convert into working Twitter Bootstrap website! As you can see everything you need is here.


Note: If you don’t want to spend all the time learning how to do PSD to HTML conversion, check out a service PSD2HTML, which does it for you! Great if you are in rush, or if you are designer and don’t really enjoy working with HTML/CSS.

How To Convert PSD To HTML To Twitter Bootstrap Video Tutorial Series

Hello everyone, welcome to Basic Web Design Video Course, where you will learn how to code a website.

In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.

You’ll learn all the steps including:

  • planning
  • wireframing
  • using basic tools and panels in Photoshop
  • basic HTML and CSS coding
  • and after learning these we will apply our knowledge and code our very first website from scratch in Twitter Bootstrap.

Resources in this tutorial:

Wireframe: Download!
Finished PSD: Download!

  • Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
  • Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
  • Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles

For our valuable readers we will be pushing the basics here. So it’s your chance to learn and become a web designer for free. Are you excited? I hope that beginners can follow through and learn how to code a website, if anything is unclear just reach out to me in the comments section.

I will do my best to walk you through everything in these HTML tutorials slowly and clearly. So let’s get started!


Part 1: PSD to HTML Tutorial – Wireframing, Photoshop Tools & Panels, and Designing

Planning and Wireframing

What is a wireframe?

A wireframe is a visual presentation of how a website’s layout will look when it’s finished. It’s about structuring the overall layout without any graphics, placing the various elements where you believe they will look and work best. Wireframing is a great step to start before jumping on to Photoshop because it allows you to focus on the important components of the website without all the visual clutter of a finished design. Wireframing also saves you time when designing a website because wireframing acts as a sketch, and instead of having to do things more than once in Photoshop, you can just adjust your ‘sketch’ until you’re happy.

Your wireframe should include boxes that represents images, header, footer, sidebars, text blocks, navigation and other content aspects of your website.

You don’t have to worry about drawing them yourself, since there are many wireframing tools available on web.

Wireframing Tools:

Tools Used: Go Mocking Bird

Photoshop Basic Tools and Panels

Some beginners know the functions of specific tools, take the Ruler Tool(I) as an example. The problem is they don’t know how to look for the distance when they measure and how to turn the guides on and off. Especially those who are using earlier versions of Photoshop. Like this question in Quora What is the shortcut to display the distance between two guides in Photoshop? So in this part I will walk you through the basic Tools and Panels in Photoshop, talk about how important they are and how each tool will help you create your website design in Photoshop.

Designing In Photoshop

Now that we have the general idea for our website’s layout, it’s time to tone this up and make it more presentable in Photoshop. Let’s make this design as simple as possible.

In the next part we will be talking about the basics of HTML and CSS and with this knowledge we will convert our simple design into a working website.

So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestion regarding the videos or how I presented it please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.

Peace!


Part 2: PSD To HTML Tutorial – Basic HTML Tags, Structure & CSS

Howdy, this is the second part of our “How To Convert PSD To HTML Course”. This time we will talk about the tools needed before starting out with HTML and CSS, then we will learn the most commonly used HTML tags.

For this tutorial, we will only cover the tags that are very useful to beginners, we will cover more tags at a later time. Then, we will style the tags using basic CSS properties. No worries guys, in the next videos we will go more in-depth and learn together.

Download: PSD Template

Final Product of this HTML Tutorial

1wd-basic-web-design-video-course

Preparation

Which Text Editor To Use For Coding?

Windows

Mac


HTML Basic Tags and Structure

We will talk about the most commonly used tags that you’ll see on a website. We will cover headings, paragraphs, links, images, list items and divisions. Also we will familiarize ourselves with the basic structure of HTML markup and how to open and close a tag.

Let’s code a website!

Basic CSS Properties

In this coding website tutorial video we will learn to style a certain element or tag using CSS properties by changing width, height, colors, floats, etc. Using these basic properties we can turn our HTML markup into a well presented website.

Now that we have finished positioning our layout structure we can now proceed to the next part, which is marking up the HTML of our very basic design template and completely style it using CSS.

So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestions regarding the videos, or how I presented them, please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.


Part 3: PSD To HTML Tutorial: How To Code a Website From Scratch

Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning.

In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wire frame into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!

Get ready and let’s get started!

The Final Product

dipped-design-preview

Resources you will need to complete this tutorial:

The Designing Part

Finding Inspiration & Wire Framing

Let’s assume that we already know what is the goal of the website we’re going to make. The first step is to gather some inspiration that suits your taste for your website and start doing some rough sketches using your pen and paper.

The next thing you will need after finding inspiration is to create a wire frame based on your ideas.

Wireframe to Photoshop Tutorial

Basing on our wire frame, we will start transferring it into Photoshop to have a much clearer vision of what exactly the website layout will look like. What’s good about doing this is we can focus only in placing the elements like buttons, text headings, and paragraphs in the right position and the right size.

Applying Styles To Website

Here is the exciting part, and that is, applying styles to all of the elements, buttons, fonts and background. In here, we can play around with a lot of stuff, for example, applying filters to images, playing with curves, putting contrast, creating our own shadows to make the elements pop out more.

So that’s it, guys, for the designing part. It’s a matter of trying and playing to come up with a great outcome. Just remember to search for inspiration because designers of the 3 design communities I’ve mention are following the latest trends of web design. It’s not copying but learning from their works.

I think there is nothing wrong with that as long as we don’t copy their overall design. So if you’re planning to create yours, please take time to think and plan what’s best for you, gather some inspiration, create a wireframe, choose the right fonts and colour scheme for your brand and, lastly, rock the Photoshop until you have come up with great results.


Learn How To Go From PSD to HTML to CMS Using Twitter Bootstrap

In the first part of this coding tutorial, we are working mostly on the graphical part. We’ve also talked about where to find inspiration, colour schemes, grid and much more.

In this 2nd section of the Elegant Landing Page Design in Photoshop tutorial, we will be working on the coding part. In here, we will talk about how to use Twitter Bootstrap for transforming our PSD design into a working website.

I will divide this into 3 videos:

  • first one will be about marking up the HTML;
  • the second will be about applying CSS styles
  • and the last one will be taking care of the responsive part. This will take much of your time but if you’re a beginner and willing to learn to transform your own Photoshop design into a working HTML website, I know you will find time to learn this. Let’s get started!

Resources you will need to complete this HTML tutorial:

HTML Markup

Here, I will walk you through on how easy it is to use Twitter Bootstrap by just linking the appropriate file path to make it work. Then I will guide you step-by-step on how to mark-up properly the HTML base on our design, starting from the header down to the footer.

Applying CSS Styles

Now that we’re done marking up our HTML, it is time to overwrite the styling that Twitter Bootstrap has provided. What’s good with this is we will not be worrying anymore on the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML. All we need to do now is to style the elements to match to our PSD design.

Responsive Part

Alright, you’ve done a lot. Have a break; get some cup of coffee. Done? Finally, we reach the last part of this tutorial, which is to make every section responsive. And also, we will make the banner and testimonial section working as a carousel.

Conclusion

That’s it guys! Imagine how easy and powerful Bootstrap is by the pre-made classes provided for us to use. All we need to do is to properly adjust some padding and margins to make everything look good and balanced.

You’ve done a great job, guys! You just completed the tutorial. I hope you can apply this in your future projects. I wish you learn something from this. Make sure to share it with your friends. If you have comments or suggestions, feel free to drop them below. I’m excited to hear from you. See you guys on the comment section. Cheers!


 

How To Make a WordPress Website in 10 Minutes

This is another quick video showing how to quickly make your website live in less than 10 minutes. We’ll show how easy it is..and we are using the easiest starting option, hosting from Bluehost. Use this link to get 50% discount to your hosting plan.


Code a Responsive Website Using HTML5 and CSS3

Now if you were looking for video HTML tutorial 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 HTML website!

Looking for quick coding tutorial? – How to Make Website Responsive In About 15 Minutes

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.

Bonus Tutorial: Create Agency Landing Page In Adobe Photoshop

Hey Guys! Were you ever asked to design a Design Agency website and you’d run out of ideas? Well, this tutorial is just for you. I will show you how to create a stylish looking landing page using Adobe Photoshop. Don’t worry, this design will not take too long and don’t be afraid of doing this if you are a beginner I promise to guide you all the way through. So what are we waiting for? Let’s get started!

Here is what we will be making, click on the image for full preview:

PSD Download

Are you ready to learn how to code a website? Let’s get started then!

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1820px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels to the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide but now change the value to 1180px, this will make a total of 960px in the center of our canvas.

Step 2: Working on Header

Our header will contain a logo, call to action, navigation, search.

Step 2.1

Using Rectangle Tool(U) with a fill color of #4d9543, create a 100px by 10px shape and place it on the very top of the canvas.

Step 2.2

This is a personal logo that I’ll be using in this tutorial. For the Burnstudio text I used Myriad Pro 30pt, color #4d9543 and #4a4a4a. Feel free to create your own brand name using these font settings. Once you have finished it, place the logo 40px below the green shape.

Step 2.3

On the other side let’s add the call to action. The font I used for this is Kozuka Gothic Pro, 24pt. If you don’t have this font try to use Helvetica Thin/Light. Color will be #333333 and #4d9543. Now, add your number and Call us now text using Text Tool(T). I also added a 1px #c8c8c8 solid line 20px from the right side of the text. You want to align it with the logo.

Step 2.4

Next we’ll create the navigation. Select Rounded Rectangle Tool(U) and set the Radius to 30px. Now, create a 960px by 50px shape with a fill color of #4d9543. Place it 40px below the logo.

Step 2.5

Apply these Blending Options

  • Stroke

  • Inner Shadow

  • Gradient Overlay

Step 2.6

First you will need to add the home icon, followed by the links. The font I used is Helvetica Light, 15pt. Using Text Tool(T) add the following links. Note that each link has a 30px distance from the divider, so measure it using Ruler Tool(I).

Step 2.7

Duplicate the divider and move it 1px from the right and apply this Blending Option.

  • Stroke

Result

Step 2.8

To create the search bar, create a 225px by 30px shape using Rounded Rectangle Tool(U) with a fill color of #4b9241, place it 55px to the left. Add the (search) text using Text Tool(T), font is Helvetica 14pt. Then, place the Search Icon 20px to the left.

Step 2.9

Apply this Blending Option to the search bar

  • Stroke

  • Drop Shadow

Last step in this part is to add Drop Shadow on the icons and text to make it more crisp.


Step 3: Working on Slider

Step 3.1

The slider part will be 300px high and 40px below the navigation, so go ahead and measure it with Ruler Tool(I).

Step 3.2

Once you’ve done it. Select Rounded Rectangle Tool(U) and create the same shape as shown in the screenshot below. All you need to do is first create a 550px by 250px shape and customize the bottom right corner the same in the screenshot below using Direction Tool(A).

Step 3.3

Next using Ellipse Tool(U) create a 160px by 160px shape. Fill color for this one doesn’t matter because we’ll be masking an image above it later. Place this shape at the center of the bottom right corner.

Apply these Blending Options

  • Stroke

Result

Step 3.4

Create another shape using the same tool. Make sure the fill color is #000000 and change the opacity to 80%. For the purpose of the presentation I made it a green so that you can see how the shape will look. The shape size is 575px by 88px.

Step 3.5

Next we will be adding the slider controls. Using Ellipse Tool(U) create a 3 13px by 13px shape. the normal state color will be #f5f5f5 and for the active is #4e9643. Place it as shown in the screen shot below.

Apply this Blending Option

  • Stroke (Normal)

  • Stroke (Active)

Result

Step 3.6

Next is the previous and next button. I created this using Pencil Tool(B). Normal state color will be #4f4c4d and for the Active the same green color. Place this as shown in the screenshot below.


Step 3.7

Now that we have all the shapes together let’s fill it with text and add an image. All you need to do is create a new layer above the shape and place your image there, then Right Click and click Create Clipping Mask. Do the same on the ellipse shape. I will leave it up to you what image you use.

Step 3.8

Next let’s add the text. For the heading title I used the same font as the call to action part, then for the paragraph I use Helvetica 13pt, #555555 and for the read more I made it Italic and used the same color green and added an arrow using Pencil Tool(B) beside it. And that’s it for this slider part.


Step 4: Working on Services Area

Step 4.1

The service area will be 240px high and 40px below the slider, so go ahead and measure it with Ruler Tool(I).

Step 4.2

Using Rounded Rectangle Tool(U) with a fill color of #f9f9f9 create a shape as shown in the screen shot below.

Apply the following Blending Option

  • Gradient Overlay

Step 4.3

We will be dividing the shape into two so that we can align our service blocks properly. 960/2 is 480px, so go ahead and measure it with the Ruler Tool(I). Add the following text and Icons as shown in the screen shot below. Note that text sizes and color are all the same so feel free to copy some elements as we did previously. Also the distance from the shape left and above is 30px.

  • Web Design

  • Vector Design

Step 4.4

Adding the shadow to the bottom part is very simple. All you need to do is duplicate the base shape and make the fill color #000000, place it below the original shape layer. Next, Go to Filter – Blur – Gaussian Blur to 7.0, create a mask on the layer and brush over the part that we don’t need.


Step 5: Working on Media Section

This part will be divided into 3 sections Video, Twitter & Facebook.

Step 5.1

We will work first on the Video section. The video will take up 305px by 220px and the same distance from above. Go ahead and measure it with Ruler Tool(I).

Step 5.2

Using Rounded Rectangle Tool(U) create a 300px by 145px shape as shown in the screen shot below with the same green color.

Apply this Blending Option

  • Gradient Overlay

Step 5.3

Next let’s create a play button. Using Ellipse Tool(U) create a 45px by 45px shape with a fill color of #f5f5f5.

Apply the following Blending Options

  • Drop Shadow

  • Inner Shadow

  • Gradient Overlay

I also added a play icon I created using the Pencil Tool(B) with the same green color.

Step 5.4

Add some text with the same font, the size will be 18pt and 14pt. Lastly add the macbook air icon and place it as shown in the screen shot below.

Step 5.5

Now let’s design the Twitter feed. Select Rounded Rectangle Tool(U) change the Radius now to 20px. Create a 105px shape of width, the height will not matter. Now customize the shape by using Pen Tool(P) and Direct Selection Tool(A) and make a shape as shown in the screen shot below.

Step 5.6

On the layers panel make the shape fill color to 0% and apply an inside stroke 1px solid #c8c8c8.

Step 5.7

Now let’s add text and the Twitter icon. Place it as shown in the screenshot below. Heading font size is 18pt, paragraph 13pt and for the link color and the hours color is #6767c9, #999999.

Step 5.8

For the Facebook widget there’s nothing special I just took a screen shot in the widget page.


Step 6: Working on Links, Blog, Location Section

Step 6.1

The footer will be 100px by 320px and 50px distance from top, so go ahead and measure it with Ruler Tool(I). Then, Fill the whole space using Rectangle Tool(U) with a fill color of #333333.

Apply this Blending Option

  • Drop Shadow

Step 6.2

Let’s create a dotted pattern to apply in the shape. Create a new 5px by 5px transparent document and create a dot on the bottom left part of the canvas as shown in the screen shot below. Go to Edit – Define Pattern and apply this to the shape with a 30% Opacity.

Result

Step 6.3

Now let’s work on the links section, the total width for this will be 225px. I used the same font style and size, the links have a distance of 25px from each other. The distance of the heading from the top is 50px and 30px below. Also, I create an arrow shape using Pencil Tool(U) and add it beside the links.

Step 6.4

Create a 225px by 29px shape with a fill color of #000000, lower down the fill color to 20%. Place it as shown in the screen shot below.

Apply this Blending Option

  • Drop Shadow

  • Inner Shadow


Step 6.5

Now let’s proceed to blog section. Using Rounded Rectangle Tool(U) create a 292px by 58px shape as shown in the screenshot below. Fill color will be #ffffff and lower down the opacity to 10%. Distance from the links section is 77px.

Step 6.6

Add the icon and fill it with text using Text Tool(T). For the date color #cccccc and for the link is #ffffff.

Step 6.7

For the location just duplicate the heading and change the text to (Our Location). Add the map Icon. I already customized the map to show where is my exact location so feel free to customize yours. For the text color will be #cccccc and for the line #484848.

Step 7: Working on Footer

Well, this part is very simple just take some sample Icons and desaturate it by going to Image – Adjustment – Desaturate or by pressing Ctrl + Shift + U. This section will take up 145px of height so, place the icons accordingly and make sure it is centered. Last thing is to add a 1px #c8c8c8 below and we’re done.

Step 7.1

Text size 12pt, paragraph color #666666, distance from top 30px, distance from text 15px.

Step 7.2

Text size 12pt, link color #666666, 2px #c8c8c8 bottom line border.

Step 7.3

For the back to top button. I create it using Ellipse Tool(U), 30px by 30px shape. I apply 1px #bdbdbd inside stroke and crate an arrow facing top using Pencil Tool(B).

We’re done with Photoshop part, now onto creating this PSD into working HTML website!


Learn How To Convert PSD Agency Landing Page to HTML Website

Howdy, folks! In this PSD to HTML tutorial you will learn how to code the agency landing into HTML website . I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.

Are you ready? Let’s get started!

Resources You Will Need To Code This Website:


Step 1: Preparation for the PSD to HTML Tutorial

We all know that in converting PSD to HTML/CSS we will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you open up the PSD file in Adobe Photoshop.

Of course you’ll need your favorite code editor and debugging tools. I used Intype as my text editor and for debugging tools I recommend Web Developer Toolbar and Firebug.

It is important to test our code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox. For IE6 trust me, it still looks fine.


Step 2: Getting Files Ready

You will need to create a directory folder and inside of it you should have /images directory for images and /js directory for JavaScript. I placed the CSS file in the root folder including the HTML file.

Also we need to export the images to be used in the PSD file. For example the The Logo, you will need to select the layer from the layers panel, copy and paste it in a different document and CTRL + ALT + SHIFT + S in order to save for web and devices, the appropriate file type for the logo should be .png. But if you’re tired of doing this you can just download the files and use the images I already exported.


Step 3: Simple Starter Layout

To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.

  • Background: you notice that the background is white.
  • Header: Notice that in this section the header has a green line on the top which covers the whole screen, so in order to do this we need to wrap the header with another container. The header contains logo, call to action, navigation and search.

Pay attention to the naming of id or class in every screenshot I made, these will be the names we will use when we markup the HTML.

  • Slides: for the slider we will be using SlideJS.

  • Service: this section contains 2 columns for web design and vector design.

  • Media: this section is divided into 3 columns for video, Twitter, and Facebook.

  • Notice the above section slides, services, and media are positioned in the center, so we will wrap them with a div and name it container.

  • Widget: this section is divided into 3 columns for links, blog, and location. Also you will notice it is covered with a gray dotted pattern that covers the whole screen.

  • Client: In this section you will notice there is a solid gray border on the bottom that covers the entire screen and a list of clients logo.

  • Footer: Finally, the footer which contain 2 columns for copyright, footer links, and back to top arrow.

Here is the image of the overall markup that we have done.

Now, Based on these notes we create the following HTML layout.

<!doctype HTML>
	<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>Burnstudio</title>
	  <link rel="stylesheet" href="style.css">
	</head>
<body>
<div id="header-wrap">
<header>
header content goes here
</header>
</div>
<!-- end header wrap -->
<div id="container">
<div id="slides">
slides content goes here
</div>
<!-- end slides -->
<div id="service">
service content goes here
</div>
<!-- end service-->
<div id="media">
media content goes here
</div>
<!-- end media -->
</div>
<!--! end container -->
<div id="widget-wrap">
<div id="widget">
widget content goes here
</div>
<!-- end widget -->
</div>
<!--! end widget-wrap -->
<div id="client-wrap">
<div id="client">
widget content goes here
</div>
<!-- end client -->
</div>
<!--! end client-wrap -->
<footer>
footer content goes here
</footer>
</body>
</html>

Notice that the naming of the divs in every section is based on the naming we did earlier when we analyzed the PSD layout. Note that this layout is a fixed width of 960px. I know it would be better if we used a CSS framework for this project. But like I have said, we will do it from scratch.


Step 4: Working on Header Section

Now lets focus more on the header section we will mark up the HTML elements that can be found in this section.

<h1><a href="index.html" title="burnstudio">Burnstudio</a></h1>
<div id="call">
<h3>(012) 345 6789</h3>
<h4 class="green">Call us <strong>now</strong></h4>
</div>
<!-- end call -->
<nav class="group">
<ul>
<li class="home"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Services</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Testimonials</a></li>
<li class="last">
<div>
<input type="text" name="search" placeholder="search" />
<input type="submit" name="search" value="go" class="search"/>
</div>
</li>
</ul>
</nav>

In the above HTML I just followed what I saw in Photoshop. First is the Logo, since the logo is clickable I added <a> tag inside the h2. Followed by the the call number which is wrapped in a div with an id of call. Lastly I created a <ul> list which contain links and the search.

Now let’s add the CSS as follows:

All CSS should be added in the style.css file. Also, make sure you just copy the CSS reset which I provided in the resources and place it in style.css file.

body{
	background: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
}
/* FONT STYLES*/
h3{
	font-size: 24px;
	font-family: Helvetica, Arial, sans-serif;
	color: #333333;
	margin-bottom: 25px;
}
h4{
	margin-bottom: 25px;
	font-size: 18px;
	font-family: Helvetica, Arial, sans-serif;
}
h5{
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
}
p{
	font-size: 13px;
	color: #555555;
	line-height: 18px;
}
a, a:link, a:visited{
	text-decoration: none;
	outline: none;
}
.green{
	color: #509743;
}
.white{
	color: #fff;
}
strong{
	font-weight: bold;
}
/* END FONTS STYLES */

In the above CSS, since we have reset styles we need to style our text formats. I know that we used a different font for our headings and I don’t think Google fonts support Kozuka Gothic. But for now we will replace it with Helvetica. Notice also I added the classes green and white, this will be used when we style green or white text that can be seen in the design.

When you test it you will have something that looks like the screenshot below.

/* HEADER */
#header-wrap{
	border-top: 10px solid #4d9543;
	padding-top: 40px;
}
header{
	width: 960px;
	margin: 0 auto;
	padding: 0;
}
header h2 a{
	display: block;
	text-indent: -999999px;
	background: url(images/logo.png) no-repeat;
	width: 214px;
	height: 77px;
	float: left;
	margin-bottom: 40px;
}
#call{
	float: right;
	border-right: 1px solid #c8c8c8;
	padding-right: 25px;
	margin-top: 20px;
}
#call h3{
	margin: 0;
}
#call h4{
	text-align: right;
	margin: 0;
}
nav{
	clear: both;
	width: 960px;
	height: 50px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	background-color: #3b7c33; /* Fallback */
	border-radius: 30px;
	/* Safari 4+, Chrome 1-9 */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
	/* IE 10+ */
	background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
	border: 1px solid #336c2b;
}
nav ul li{
	float: left;
	border-right: 1px solid #336c2b;
	border-left: 1px solid #78c368;
}
nav ul li.home{
	border-left: none;
	text-indent: -9999px;
	background: url(images/home.png) no-repeat 50% 50%;
}
nav ul li.last{
	border-left: none;
	border-right: none;
	float: right;
	margin-right: 20px;
}
nav ul li a{
	display: block;
	padding: 0 30px;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	color: #fff;
	text-shadow: 0 1px 0 #387031;
}
nav ul li a:hover{
	background: #5fae53;
}
nav ul li.home a:hover{
	-webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li div input[type=text]{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	background: #4b9241;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #5ead52;
	border-top: 1px solid #346d2c;
	color: #fff;
	text-shadow: 0 1px 0 #387031;
	padding: 5px 0 5px 20px;
	width: 200px;
}
nav ul li div input[type=text]:focus{
	outline: none;
}
/* TO STYLE PLACE HOLDER */
::-webkit-input-placeholder {
   color: #fff;
}
:-moz-placeholder {
   color: #fff;
}
nav ul li div input[type=submit]{
	background: url(images/search.png) no-repeat 50% 50%;
	border: none;
	text-indent: -999999px;
	margin-left: 15px;
	height: 50px;
	width: 16px;
}
/* END HEADER */

In the above CSS I styled header-wrap with a 10px green border, since a div by default is styled in a block display this will fill the whole width of the screen. Then I centered the header with margin: 0 auto. Next, I styled the Logo with a fixed width and height. I also floated it the left. For the Call I floated it right and apply a 1px gray border also a 25px padding from right. Note that to get this value you need to go back to Photoshop and use the Ruler Tool(I) to measure the distance. Since I styled the h3 and h4 with a 25px bottom margin in our base text format we need to reset it and change it to 0. This will make the h4 and h3 in the call section back to normal.

Next, I styled the navigation with a fixed width, height and a gradient, I applied a clear both to clear the above floating elements logo & call. All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border. All a is styled 30px padding from left and right 0 for top and bottom, a height of 50, a text shadow, a line-height of 50 to make it center vertically. For the class home I pushed out the text and replace it with the home icon. Since the corner is rounded we need to specify another style hover for the home button that’s what I did below the a:hover.

Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property.

Before previewing this to IE lower versions make sure to copy and paste the code below in the header section of our HTML file. This will enable HTML5 elements to work in older IE browsers.

<!--[if IE]>
	<script type="text/javascript">
	(function(){
	var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
	for(var i = 0; i < html5elmeents.length; i++){
	document.createElement(html5elmeents[i]);
	}
	}
	)();
	</script>
	<![endif]-->

Now our layout should look like this.


Step 5: Working on Slider Section

Now let’s add the content inside the slides element, here’s the HTML.

<div class="slides_container">
<div>
<img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
<div class="slide-right">
<h1 class="slide-heading">Artthatworks 1 dolor sit amet, consectetur adipiscing elit.</h1>
Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.
<a href="#" class="readmore">read more</a>
</div>
</div>
<div>
<img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
<div class="slide-right">
<h1 class="slide-heading">Artthatworks 2 dolor sit amet, consectetur adipiscing elit.</h1>
Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.
<a href="#" class="readmore">read more</a>
</div>
</div>
<div>
<img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
<div class="slide-right">
<h1 class="slide-heading">Artthatworks 3 dolor sit amet, consectetur adipiscing elit.</h1>
Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.
<a href="#" class="readmore">read more</a>
</div>
</div>
</div>
<!-- end slies container -->

In the above HTML markup I added a class slides_container this will hold our slides elements which is wrapped by a div that contains an image, a div class of slides-right that holds the slide title, info, and read more link. Also I added a class for the heading slide-heading, paragraph info and for the read more readmore. This will be helpful since we will repeat the HTML code 3 times and they will have the same styles if we add the CSS later.

Now let’s style all the element, here’s the CSS.

#container{
	width: 960px;
	margin: 0 auto;
}
/* SLIDES */
#slides{
	position: relative;
	margin-top: 40px;
}
.slides_container{
	height: 315px;
}
.slide-right{
	position: absolute;
	top: 0;
	left: 385px;
}
.slide-heading{
	background: url(images/slide-heading.png) no-repeat;
	width: 494px;
	height: 68px;
	color: #fff;
	font-size: 24px;
	padding-top: 20px;
	padding-left: 80px;
	margin-top: 35px;
	margin-bottom: 30px;
}
.slide-right .info{
	width: 395px;
	margin-bottom: 20px;
	margin-left: 155px;
}
.slide-right .readmore{
	margin-left: 155px;
}
.readmore{
	font-style: italic;
	text-decoration: none;
	color: #509743;
	padding-left: 15px;
	background: url(images/more.png) no-repeat 0 50%;
}
.readmore:hover{
	color: #c8c8c8;
}
.pagination{
	position: absolute;
	bottom: 25px;
	left: 25px;
	z-index: 99;
}
ul.pagination li{
	float: left;
	margin-right: 10px;
	background: url(images/pagination.png) no-repeat;
	background-position: top;
	width: 14px;
	height: 15px;
}
ul.pagination li.current{
	background-position: bottom;
}
ul.pagination li a{
	display: block;
	text-indent: -999999px;
}
a.next{
	position: absolute;
	right: 25px;
	bottom: 30px;
	display: block;
	width: 7px;
	height: 13px;
	background: transparent url(images/prev-next.png) no-repeat;
	background-position: top right;
	text-indent: -9999px;
}
a.prev{
	position: absolute;
	right: 50px;
	bottom: 30px;
	display: block;
	width: 7px;
	height: 13px;
	background: transparent url(images/prev-next.png) no-repeat;
	background-position: top left;
	text-indent: -9999px;
}
a.next:hover{
	background-position: bottom right;
}
a.prev:hover{
	background-position: bottom left;
}
/* END SLIDES*/

In the above CSS since slides, service and media are wrapped with the container div, we will style this first to make them centered. Next, slide’s position is set to relative to make it the parent element. This is helpful so that we can position the inside elements prev, next, and pagination absolutely which are auto-generated by the JavaScript. For the slides_container I gave it a fixed height of 315px which is equal to the height of the slider image. For the slide-right which contains the heading, info and read more, all positioned absolutely, 0 out top, and pushed it 385px from left.

For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly. For .info I gave it a fixed width with margin to align it. For .readmore first I gave it a separate margin style since only the slider readmore has this and all of the readmore links in the layout has no margins from left. Then followed by the readmore styling which has a green color with background arrow and a gray hover.

For the pagination, prev, and next buttons this is auto-generated by the JavaScript in order to style this first we need to identify what is the tag or the applied html class attribute. To do this you need to used the Firebug tool if you’re using Firefox, if you’re using Chrome just right click to the element and click Inspect Element a dialog will appear and you can see there what element is being used.

Now that you know the element, we will target it in the CSS. For the Pagination I positioned it absolutely, placed it 25px from the bottom and left, also I applied z-index 99px – this will make the pagination right on the very top over the other elements. If werre not going to apply this notice that it is not clickable because the image is on top of the pagination itself. Then I floated the pagination li elements to left, gave it a right margin of 10px, added a background image with a fixed width and height.

I positioned the background by default to top since the normal state image is on top, for the current or the active state we will going to reverse the positioning from top to bottom and lastly display it as a block level element and hide the text. For the .next and .prev pretty much the same we did in pagination but this time it is positioned to the right. Noticed the prev-next.png on the left side this contains the image of prev button and on the right side this contains the image of the next button. I positioned the .next image to top right, .prev positioned to top-left, and for the hover just change the top to bottom.

Now let’s add the required jQuery script in the header. Copy the slides.min.jquery.js file from the /source directory and paste it in our /js directory.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script src="js/slides.min.jquery.js"></script>

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the . Here’s the JavaScript.

<script>
$(function(){$('#slides').slides({preload: true,generateNextPrev: true,});});
</script>

Now our layout should look like this.


Step 6: Working on Service Section

Now let’s add the content inside the service element, here’s the HTML.

<div id="web">
<img src="images/web.png" />
<h3>Web <strong><span class="green">Design</span></strong></h3>
Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.
<a href="#" class="readmore">read more</a>
</div>
<!-- end web -->
<div id="vector">
<img src="images/vector.png" />
<h3>Vector <strong><span class="green">Design</span></strong></h3>
Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.
<a href="#" class="readmore">read more</a>
</div>
<!-- end vector -->

I created a unique div id web and vector which contains the same elements such as an image, headings, paragraphs and readmore link. In the heading you can see I added a span and applied a class of green since the heading is combined with different colour. For the read more link we apply the same class we did in the slider area.

Now let’s style all the element, here’s the CSS.

/* SERVICE */
#service{
	margin: 40px auto;
	height: 253px;
	padding-top: 30px;
	background: url(images/service-bg.jpg) no-repeat;
}
#web{
	float: left;
	width: 450px;
	padding-left: 30px;
}
#web p{
	width: 260px;
	margin-bottom: 20px;
}
#web img{
	float: right;
	margin-right: 50px;
}
#vector{
	float: right;
	padding-left: 30px;
	width: 450px;
}
#vector p{
	width: 260px;
	margin-bottom: 20px;
}
#vector img{
	float: right;
	margin-right: 50px;
}
/* END SERIVCE*/

I styled the service div 40px from above to bottom and added an auto left and right, I also added a height that is equal to the background image. For the web div I floated it to the left and gave it a 50% width of the parent div, the same with the vector div but floated to the right. For the paragraph I gave it a fixed width with a margin, for the image I floated it right and give it a right margin, pretty much the same on vector image and text.

Now our layout should look like this.


Step 7: Working on Media Section

Now let’s add the content inside the media element, here’s the HTML.

<div id="media" class="group">
<div id="video">
<h4>Quick<strong>Video Tour</strong></h4>
<h5>How we Design our works!</h5>
<a href="#" class="play"><img src="images/play.png" alt="play" /></a>
</div>
<div id="twitter">
<h4>Twitter <strong><span class="green">Feed</span></strong></h4>
Mashable Video: Principal Resigns After Allegedly Posing as a Student on Facebook -<a href="#" class="t-link">http://on.mash.to/IVYWYJ</a>
9 hours ago
</div>
<div id="facebook">
<h4>Like Us On <strong><span class="green">Facebook</span></strong></h4>
</div>
</div>
<!-- end media -->

I created 3 different sections: video div which contains text headings h4, h5 and a clickable image for play button, twitter div which contains a heading and a paragraph, lastly a facebook div which contains a heading and if you wish to add your widget you can add it by going to Facebook plugins. Also, I added a class group on the media div. I’ll show you what that does when we move on to the CSS.

Now let’s style all the elements, here’s the CSS.

/* MEDIA  */
#media{
	margin: 0 auto;
}
#video{
	width: 302px;
	padding-top: 20px;
	float: left;
	margin-right: 58px;
	background: transparent url(images/video-bg.png) no-repeat;
	height: 225px;
}
#video h4{
	margin: 0;
}
#video h4, #video h5{
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 0 #387031;;
}
#video .play{
	float: right;
	margin-top: 5px;
}
#twitter{
	width: 285px;
	height: 180px;
	float: left;
	margin-right: 30px;
	background: transparent url(images/twitter-bg.png) no-repeat;
	background-position: bottom;
	padding: 0 0 20px 0;
}
#twitter p{
	padding: 0 20px;
}
#twitter .time{
	font-size: 11px;
	font-style: italic;
	color: #999999;
	margin-top: 15px;
}
a.t-link{ color: #6767c9; text-decoration: none; }
a.t-link:hover{ text-decoration: underline; }
#facebook{
width: 285px;
float: right;
}
/* END MEDIA*/
/* CLEAR FIX */
.group:after {
  content: "";
  display: table;
  clear: both;
}
/* END FIX */

I styled the video div with a fixed width and height of 302px x 225px, gave it padding, floated it to the left and lastly added a background image. I styled h4 and h5 centred and added a dropshadow, for the play button which has a class of .play I floated it to the right and added a margin to position it on the right. For twitter div I gave it a fixed width and height of 258px by 180px and added a background image positioned in bottom, also I gave the .time with a smaller font and lighter caller, also for the a.t-link which has a blue color. For facebook this is the same to twitter heading and floated to right.

The purpose of the group class is to force the element to self-clear its children a.k.a clearfix. What this means is the media is the parent element which holds child elements inside of it that are floating left this are video, twitter and facebook. The media element doesn’t determine it’s height when we apply that clearfix hack this will identify the automatically identify the maximum height of the child element.

Now our layout should look like this.


Step 8: Working on Widget Section

Now let’s add the content inside the widget element, here’s the HTML.

<div id="widget-wrap" class="group">
<div id="widget">
<div id="links">
<h4 class="white">Other <strong>Links</strong></h4>
<ul>
<li><a href="#">www.example.com</a></li>
<li><a href="#">www.1stwebdesigner.com</a></li>
<li><a href="#">www.labzip.com</a></li>
<li><a href="#">www.samplelink.com</a></li>
<li><a href="#">www.outgoinglink.com</a></li>
<li><a href="#">www.link.com</a></li>
</ul>
</div>
<div id="blog">
<h4 class="footer-header white">Latest From The <strong>Blog</strong></h4>
<img src="images/blog.png" alt="blog" />
Maecenas iaculis lorem vel dui vulputate non consequat mi congue.
05.30.2012
<a href="#" class="readmore">read more</a>
</div>
<!-- end blog -->
<div id="location">
<h4 class="footer-header white">Our <strong>Location</strong></h4>
<img src="images/map.png" alt="map" />
123 unknown street, address
</br> 8600 Philippnes
</div>
<!-- end location -->
</div>
<!-- end widget -->
</div>
<!--! end widget-wrap -->

I added a class group to widget-wrap, you already know what this class does. Next I created 3 div links which contains an unordered list, blog which contains a heading, image, title, date and read more link. Lastly, location which contain an image, and the address.

Now let’s style all the element, here’s the CSS.

/* WIDGET */
#widget-wrap{
	padding: 50px 0;
	background: #333333 url(images/widget-bg.jpg);
}
#widget{
	width: 960px;
	margin: 0 auto;
}
h4.footer-header{
	background: transparent url(images/footer-header.png) no-repeat;
	line-height: 58px;
	text-indent: 30px;
}
#links{
	width: 225px;
	float: left;
	margin-right: 75px;
}
#links ul{
	list-style-image: url(images/links.png);
	margin-left: 15px;
}
#links ul li a{
	color: #cccccc;
	font-size: 13px;
	padding: 8px 0;
	display: block;
}
#links ul li a:hover{
	color: #fff;
}
#blog{
	position: relative;
	width: 290px;
	float: left;
	margin-right: 75px;
}
#blog img{
	position: absolute;
	top: 50px;
	left: -18px;
}
#blog p.title{
	color: #fff;
	margin-left: 110px;
	margin-bottom: 15px;
}
#blog p.date{
	margin-left: 110px;
	color: #cccccc;
	font-style: italic;
	font-size: 11px;
	margin-bottom: 15px;
}
#blog a.readmore{
	margin-left: 110px;
}
#location{
	position: relative;
	width: 290px;
	float: right;
}
#location img{
	position: absolute;
	top: 45px;
	left: 22px;
}
#location p.address{
	margin-top: 115px;
	border-right: 1px solid #484848;
	padding-right: 20px;
	text-align: right;
	color: #cccccc;
}
/* END WIDGET */

I styled widget-wrap div with a padding of 50px top and bottom and added a gray dotted pattern background. For the widget div I appled 960px width and position it centered. For the links div I gave it a width of 225px, floated it to left and give it a right margin 75px, for the ul list. I added a background image, also I styled the a with a lighter gray and hover of white (I didn’t follow the hover effect in the PSD design).

For the blog div I gave it a width of 290px, floated it to left, apply a 75px margin and position it relatively. For the heading I added a backround, indented the text, and added 58px line height to make the text centered vertically. For the blog img since we just positioned blog div to relative we can now position this absolutely to position the image the same to psd design which is left 18px. For the .title, .date and .readmore they have the same margins from left. For the location the same also in blog where it is positioned relatively and position the inside image absolutely, and for the address I added margin and paddings and give it a 1px border to the right.

Now our layout should look like this.


Step 9: Working on Client Section

Now let’s add the content inside the client element, here’s the HTML.

<div id="client-wrap" class="group">
<div id="client">
<ul>
<li><img src="images/client-1.jpg" alt="" /></li>
<li><img src="images/client-2.jpg" alt="" /></li>
<li><img src="images/client-3.jpg" alt="" /></li>
<li><img src="images/client-4.jpg" alt="" /></li>
<li><img src="images/client-5.jpg" alt="" /></li>
</ul>
</div>
<!-- end client -->
</div>
<!-- end client-wrap -->

In above HTML I added again a group class on client-wrap div and added an unordered list element that contains an image.

Now let’s style all the element, here’s the CSS.

/* CLIENT */
#client-wrap{
	background: #fff url(images/client-bg.jpg) repeat-x;
	padding: 40px 0;
	border-bottom: 1px solid #c8c8c8;
}
#client{
	width: 960px;
	margin: 0 auto;
}
#client ul li{
	width: 20%;
	float: left;
	text-align: center;
}
/* END CLIENT */

In the above CSS I styled the client-wrap div by adding a little gray gradient background, padding top and bottom 40px and lastly added a solid gray bottom border. I positioned center the client div and lastly for the unordered list elements which contains the images I floated it left, since we have 5 images I divided it evenly by giving a 20% width of each element, lastly I applied text-align to make the images center.

Now our layout should look like this.


Step 10: Working on the Footer Section

Now let’s add the content inside the footer element, here’s the HTML.

<footer class="group">
<div id="footer-left">
Copyright <a href="#" class="green">www.1stwebdesigner.com</a> </br>
Designed by <a href="#" class="green">Michael Burns</a>
</div>
<div id="footer-right">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<a href="#header-wrap"><img src="images/back-top.png" alt="back-top" class="back-top" /></a>
</footer>

In above HTML I added a group class to footer, then created 2 section first is footer-left which contain the copyright text, next footer-right which contain an unordered list links. Lastly I added clickable back to top image.

Now let’s style all the element, here’s the CSS.

/* FOOTER */
footer{
	clear: both;
	width: 960px;
	margin: 0 auto;
	padding: 30px 0 60px 0;
	position: relative;
}
#footer-left{
	float: left;
	width: 50%;
}
#footer-left p{
	font-size: 12px;
	color: #666666;
}
#footer-left a:hover{
	color: #c8c8c8;
}
#footer-right{
	float: right;
	width: 50%;
}
#footer-right ul{
	float: right;
}
#footer-right ul li{
	float: left;
	margin-right: 30px;
}
#footer-right ul li:last-child{
	margin-right: 0;
}
#footer-right ul li a{
	color: #666666;
	display: block;
	padding-bottom: 10px;
	font-size: 12px;
}
#footer-right ul li a:hover{
	border-bottom: 2px solid #c8c8c8;
}
.back-top{
	position: absolute;
	bottom: 30px;
	right: 50%;

}
/* END FOOTER */

In above CSS I styled the footer by giving a width of 960px, centered it, applied a padding of 30px top and 60px bottom, lastly I positioned it relatively. For the footer-left and footer-right I gave it a width of 50%, floated it left and right. For the copyright text I made it smaller and changed the color to a lighter one. For the links I floated the ul to the right and floated li to left, gave a margin of 30px, for the last-child I removed the margin, for the links I styled it the same with the copyright text and added 2px border when its hovered. Lastly, since I positioned the footer relatively, I can position the back-top absolutely to the center which is right 50%.

Now our layout should look like this.

We’re done, Finally!

Wew! This took me so long to write. How was this PSD to HTML tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make this layout responsive. Yeah! You heard it right, let’s make it responsive!

If you liked this tutorial kindly share it with your friends. Thanks! 🙂


Convert Burnstudio Agency PSD Into Responsive HTML Website: Media Queries Tutorial

If you’re following the series, we have converted Burnstudio Design Agency from PSD to working HTML/CSS version. We have discussed how we will markup the HTML and how we will style it using CSS.

Now, in this tutorial I will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports.

By the end of this media queries HTML tutorial you will learn how to convert any website into a responsive website.

Let’s get started!

Demo | Download


Step 1: Preparation

Make sure that you followed the previous tutorial where we converted a PSD file into a working HTML/CSS website. Before anything else I want to point out that we need to design how it will look based on our existing design for a different viewport, in this case for a mobile device that has a max-width of 320px.

Click to see full preview.

In the image above you can see the elements are the same but I styled it in a way that will suit the 320px width of a mobile version. For this tutorial we will not tackle the design process, we will jump into coding directly. Don’t worry, in my upcoming HTML tutorial I will teach you how to design for the responsive web.

Lastly, of course you still need your favorite code editor, debugging tools and lastly the web browser where we can view our coded layout.


Step 2: Getting Files Ready

Make sure you open up the HTML file and the CSS file in your text editor and we’re ready to go.


Step 3: Adding Meta Tag

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

This will take control of the layout on mobile browsers. Place this inside the tag and you’re ready to go.


Step 4: Working < 960 Viewport

This is how our website layout will look on screens with a width of 960px and below.

@media only screen and (max-width: 960px){styling goes here}

This is our first media query that will target screens less than 960px.

Now let’s add the CSS styling as follows:

/* VIEWPORT &amp;lt; 960px */
@media only screen and (max-width: 960px){
header, nav, #slides, #service, #widget, #media, #client, footer, #container{ width: 768px; }
	.slide-right{
		left: 0;
	}
	.slide-heading{
		width: auto;
		height: auto;
		padding: 0;
		margin: 0 0 20px 0;
		background-image: none;
		color: #333;
	}
	.slides_container div img{
		display: none;
	}
	.slide-right .info{
		width: 768px;
		margin-bottom: 20px;
		margin-left: 0;
	}
	.slide-right .readmore{
		margin-left: 0;
	}
	.slides_container{
		height: 200px;
	}
	a.next{
		right: 0px;
	}
	a.prev{
		right: 25px;
	}
	.pagination{
		left: 0;
	}
	#service{
		background: none;
		height: auto;
	}
	#vector{
		padding-left: 0;
		width: 369px;
	}
	#vector img{
		margin-right: 0;
	}
	#web{
	padding-left: 0;
	width: 369px;
	}
	#web img{
		margin-right: 0;
	}
	#facebook{
		display: none;
	}
	#twitter{
		margin-left: 18px;
	}
	#blog{
		clear: both;
	}
	#links{
		width: auto;
		margin-bottom: 30px;
	}
	#links ul li{
		float: left;
		margin-right: 30px;
	}
}

Since our layout is now less than 960px, we will style all the main container elements by changing the width to 768px.

Next is the slider area, notice that we have a heading with a class of slide-heading, a div with a class of slide-right which contains the information and read more. We need to change the style of this by removing the background of the heading and changing the fixed width/height to auto, zero out the padding, add a 20px margin, and lastly change the color to a dark gray.

For the img that displays on our slider we will hide it by changing the display to none. For the slide-right .info .readmore we will zero out the left margin to push it back to the left, also for the .info let’s change the width to 768px and add a 20px bottom margin. For the slider controls let’s just move the next to right by change the right value to 0px, for the prev change the value to 25px. Lastly, for the pagination change the left value to 0px.

Moving on to the service section. When we’re coding the service section we forgot to add a group class to it’s parent container, we already know the function of the group class so no need to explain. For the CSS styling we will just remove the background and change the height value to auto.

<div id="service" class="group"/>

Inside of our service section we have vector and web that we styled by default by giving a padding of left 30px, let’s zero it out and change the width to 369px. Lastly, for the vector img and web img let’s change the margin right to zero.

In the media section since we don’t have enough space here let’s just hide facebook by changing the display to none. Maybe you’re wondering why hide it? Well, I know we should find a way to make everything responsive, but based on what I have read from other blogs ,sometimes we need to remove/hide some elements due to lack of space, just like some other responsive sites, they remove a couple of links in their main navigation.

In widget section the only thing we need to change is the links, let’s change the default width to auto, then by floating the li elements to left and adding a 30px margin to right.


Step 5: Working < 768 Viewport

@media only screen and (max-width: 768px){styling goes here}

The above CSS is our second media query that will target screens less than 768px (Tablet Portrait).

Now let’s add the CSS Styling as follows:

/* VIEWPORT &amp;lt; 768px */
@media only screen and (max-width: 768px){
	header, nav, #slides, #service, #widget, #media, #client, footer, #container{
	width: 524px;
	}
	nav ul li.last{
	display: none;
	}
	.slides_container{
		height: 250px;
	}
	.slide-right .info{
		width: 524px;
	}
	#web{
		width: 100%;
		margin-bottom: 30px;
	}
	#web img{
		padding-left: 20px;
	}
	#vector{
		width: 100%;
	}
	#vector img{
		padding-left: 20px;
	}
	#service{
		height: auto;
	}
	#video{
		margin: 0 auto 30px auto;
		float: none;
	}
	#twitter, #facebook{
	float: none;
	margin: 0 auto;
	margin-bottom: 30px;
	}
	#facebook{
		display: block;
	}
	#links{
		width: 285px;
		float: none;
		margin: 0 auto;
	}
	#links ul li{
		width: 285px
	}
	#blog{
		float: none;
		margin: 30px auto;
	}
	#location{
		float: none;
		margin: 0 auto;
	}
	#client ul li{
		width: 100%;
		float: none;
		margin: 30px 0;
	}
	#footer-left{
		width: 100%;
		margin-bottom: 30px;
	}
	#footer-left p{
		text-align: center;
	}
	#footer-right{
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}
	#footer-right ul{
		float: none;
		width: 75%;
		margin: 0 auto;
	}
}

The first step is similar to what we did in the previous one. Let’s change the width of the main containers to 524px.

Now that we are on a smaller viewport, which is less than 768px, our search bar will fall down the navigation. So for a quick solution let’s just hide it for now.

In slider area let’s decrease the height of the container to 250px and change the width of .info to 524px.

In web and vector section let’s change the width to 100% to fill up the whole space and by giving the web a 30px bottom margin to give space.

In media section by default our video div is floated to left let’s change it to none, position in to center, and add we will add a 30px bottom margin. For twitter and Facebook still the same float to none, position to center, add a 30px bottom margin and lastly let’s reveal the Facebook again by changing the display to block.

In widget section we will position everything to the center, so we will give the links a fixed width of 285px, change the float to none and add a margin 0 auto to position it to the center, also for the li element change the width to 285px. Now that we have the links in position let’s position the blog and location by doing the same step.

In client section by default we give it 10% width to equally divide and position the images correctly, now let’s change it to 100% and add a 30px bottom margin.

In footer section let’s give a 100% width to footer-left and footer-right. In footer-left we will position the text to center by simply adding text-align to center. For the footer links we need to add a class of group again to it’s container which is footer-right.

<div id="footer-right" class="group"/>

Now that we added the class let’s change the float to none and add a 30px bottom margin. Lastly, we will change the website width to 75% and give it a margin 0 auto to position to center.


Step 6: Working < 524 Viewport

@media only screen and (max-width: 524px){styling goes here}

This is our third media query that will target screens less than 524px (Mobile).

Now let’s add the CSS Styling as follows:

/* VIEWPORT &amp;lt; 524px */
@media only screen and (max-width: 524px){
	header, nav, #slides, #service, #widget, #media, #client, footer, #container{
	width: 300px;
	}
	header h2 a{
		width: 100%;
		background-position: center top;
	}
	nav{
		height: auto;
	}
	nav ul li{
		float: none;
		border: none;
		border-bottom: 1px solid #336c2b;
		border-top: 1px solid #78c368;
	}
	nav ul li.home{
		border-top: none;
	}
	nav ul li.last{
		display: block;
		border-bottom: none;
		width: 100%;
		margin: 0;
	}
	nav ul li.last div{
		margin-left: 15px;
	}
	nav ul li a{
		text-align: center;
	}
	nav ul li.home a:hover{
	-webkit-border-top-left-radius: 30px;
	-webkit-border-top-right-radius: 30px;
	-webkit-border-bottom-left-radius: 0;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 0;
	background: #5fae53 url(images/home.png) no-repeat 50% 50%;
	}
	#call{
		display: none;
	}
	.slides_container{
		height: 270px;
	}
	.slide-heading{
		width: 300px;
	}
	.slide-right .info{
		width: 300px;
	}
	#web img{
		width: 64px;
		height: 72px;
	}
	#vector img{
		width: 76px;
		height: 69px;
	}
	#service{
		height: auto;
	}
	#footer-right ul{
		float: none;
		width: 285px;
		margin: 0 auto;
	}
	#footer-right ul li{
		float: none;
		margin: 0;
	}
	#footer-right ul li a{
		padding: 8px 0;
	}
}

Now we’re getting to a smaller viewport which is for mobile devices. First thing to change is the main containers: change the width to 300px.

Next we will hide the call div by adding a display to none. For our logo let’s position it to center by giving it a width of 100% and by adding a background-position center top.

In nav part let’s make the navigation styled vertically to perfectly suit a smaller viewport. First, let’s give the nav of height of auto, unfloat the li elements, border to none since we have a border-left and right by default, then overwrite the style by adding again a border-bottom and top. Now we will remove the border-top for .home and border-bottom for .last, also we will display the search bar again by applying a display block to .last also give it 100% width and 0 out the margin. To position the search bar correctly apply a 15px margin to the left on li.last div. Now let’s position the text to center by applying text-align center. Next, we will change the border-radius to top-left and top-right when we hover to .home.

In slider section let’s just change the width of the container to 270px and for the .slide-heading and .info change the width to 300px.

In service section let’s change the width and height of the image for web and vector, lastly give the service div a height of auto.

Lastly we will style the footer links by changing the float to none, give it a width of 285px and position it to center. For li elements change the float also to none and 0 out the margin, lastly give the a element a 8px top and bottom padding.

We’re done, Finally!

And there you go, we just turned an HTML layout into a responsive one. How was the tutorial? I hope you learned something from it. If you have some techniques, comments, and suggestions please share them below!

If you liked this tutorial kindly share it with your friends. Thanks! 🙂


30+ Best PSD to HTML/CSS Conversion Tutorials

If you’ve found some troubles on turning your PSD designs into HTML/CSS, or you would like to learn some new HTML and CSS tips, this roundup is for you. These tutorials would help you to improve your coding skills and techniques.

If you went through previous tutorials, you should already be pretty good with PSD to HTML conversion, but if you are real passionate web designer you will not stop until you are PSD to HTML expert! So this is for you, 32 more tutorials collected from all around the web. Enjoy!

1. PSD2HTML: Highest quality HTML5 / CSS3 Conversion Service

psd-to-html-service

Maybe, just maybe sometimes it is better to just outsource the parts that you are not enjoying. If you love to design in Photoshop or Sketch, but hate coding, this resource will be for you.

For just $99 per inner page and $199 for the first page PSD2HTML will create the highest quality HTML5 / CSS3 working version compatible with all modern browsers and devices.

Check them out, in case you are in need for such service. 1WD totally recommends them, they know what they are doing. In fact they already have completed over 75,000 projects!

psd-to-html-responsive-website-dev-service

2. Coding Up a Web Design Concept into HTML & CSS

In this walkthrough you’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

Coding Up a Web Design Concept into HTML & CSS

3. Coding a Web Layout in XHTML and CSS

In this tutorial we’ll be learning how to code a web layout. Hopefully it’ll be good practice for anyone who doesn’t really know how to use XHTML and CSS. Moreover, this tutorial acts as a great introduction to CSS and XHTML.

Coding a Web Layout in XHTML and CSS

4. How to Design a Blue Marketing Company Layout in Photoshop

In this web development tutorial, you will learn how to code a web page template from a Photoshop mock-up from a previous tutorial called “Create a Clean and Professional Web Design in Photoshop” using HTML/CSS.

How to Design a Blue Marketing Company Layout in Photoshop

5. Coding: Corporate WordPress Style Layout

In this tutorial you will learn how to code the Corporate WordPress Style Layout into xhtml and css.

Coding: Corporate WordPress Style Layout

6. Digital Curriculum Vitae: PSD Conversion

This tutorial you’ll be walking through the process of coding your “Digital Curriculum Vitae” into a working HTML/CSS Template.

Digital Curriculum Vitae: PSD Conversion

7. Design & Code a Cool iPhone App Website in HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial you’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Design & Code a Cool iPhone App Website in HTML5

8. Design and Code Your First Website in Easy to Understand Steps

In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites!

Design and Code Your First Website in Easy to Understand Steps

9. Coding a Band Website Created in Photoshop to HTML Tutorial

In Part 1 of this tutorial, you learned step-by-step how to design an awesome band website in Photoshop. Now in Part 2, you’ll learn how to take that PSD and turn it into clean, working XHTML/CSS code.

Coding a Band Website Created in Photoshop

10. Coding: Design Lab TV Styled Layout

In this tutorial you will learn how to code the Design Lab TV Styled layout into xhtml and css.

Coding: Design Lab TV Styled Layout

11. Personal VCard Pt.2

In this tutorial you’ll be converting the vCard into a 4 page template.

Personal VCard Pt.2

12. How to Code up a Web Design from PSD to HTML

The tutorial covered the process of designing our site concept from sketch to finished PSD design.

How to Code up a Web Design from PSD to HTML

13. How to Design and Code a Flexible Website

In this tutorial, you’re going to be designing and coding a simple blog-style web-page. You’ll pay special attention to making your design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

How to Design and Code a Flexible Website

14. Create an Animated “Call to Action” Button

In this web design and development tutorial, you’ll get a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

Create an Animated “Call to Action” Button

15. Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial

In this tutorial you will walk through the process of coding Corporate Website design in HTML and CSS.

Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial

16. Hosting Layout #2: Sitebuild

Learn how to code a Hosting Layout using a free PSD file.

Hosting Layout #2: Sitebuild

17. How to Create a Lifestream of Your Online Activities

A lifestream is a simple website that compiles your online activity in real time and displays it in chronological order. These days all the cool kids have personal lifestream sites, so let’s take a look at creating our own website that pulls in a range of RSS feeds through SimplePie and displays them together in a cool design.

How to Create a Lifestream of Your Online Activities

18. Design and Code a Slick Website PSD To HTML From Scratch

In this second part of the tutorial, you will code your design into a standards-compliant, cross-browser xHTML, CSS, and JavaScript/jQuery layout. Fire up Coda, or your editor of choice… it’s coding time!

Design and Code a Slick Website From Scratch

19. Minimal and Modern Layout: PSD to XHTML/CSS Conversion

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

20. How to Code a Clean Portfolio Design

Coding a Clean Portfolio Design into HTML/CSS.

How to Code a Clean Portfolio Design

21. Web Design Layout #10: Sitebuild

Today you’ll be taking through the process of converting web design layout into a one page template.

Web Design Layout #10: Sitebuild

22. How to Convert a Photoshop Mockup to XHTML/CSS

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

How to Convert a Photoshop Mockup to XHTML/CSS

23. How To Build Your Own Single Page Portfolio Website

Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

How To Build Your Own Single Page Portfolio Website

24. How to Code a Grunge Web Design PSD To HTML from Scratch

In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.

How to Code a Grunge Web Design from Scratch

25. Dark Layout #2: Sitebuild PSD To HTML Tutorial

In this coding tutorial you’ll be showed how to slice and dice the dark layout #2 PSD into a working template.

Dark Layout #2: Sitebuild

26. From Photoshop to HTML

You will learn how to code a business website from the Photoshop file that is included with this tutorial.

From Photoshop to HTML

27. Coding a Clean & Illustrative Web Design from Scratch

In this comprehensive and step-by-step PSD to HTML tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.

Coding a Clean & Illustrative Web Design from Scratch

28. My Project Pt.2: PSD To HTML

Today you’ll be converting your PSD into a one page working CSS template through this tutorial.

My PROject Pt.2: PSD To HTML

29. Coding a Clean Web 2.0 Style Web Design from PSD To HTML

In this web development tutorial, you’ll learn how to build a web page template from a Photoshop mock-up from a previous tutorial called “How to Create a Clean Web 2.0 Style Web Design in Photoshop” using HTML/CSS and the jQuery library.

Coding a Clean Web 2.0 Style Web Design from Photoshop

30. Web Design Layout #9 SiteBuild

In this HTML tutorial you’ll learn how to code the web design layout #9 PSD.

Web Design Layout #9 SiteBuild

31. Portfolio Layout #10: Learn To Code It

Coding tutorial of the portfolio #10 layout. In this tutorial you’ll read the steps to take in slicing and coding the layout. Before attempting this PSD to HTML tutorial i highly suggest you create the layout before hand and have it ready

Portfolio Layout #10: Learn To Code It


How Long Does It Take To Learn Programming?

Everyone wants to be a programmer and design their own web based startups. 1WD is your one stop resource for web design, programming, inspiration and everything else that’s related. So, we thought why not compile a one stop article for those who are beginning to learn coding. Without further ado, let us all learn how to program.

There is quite a bit of information in this article that you may find useful, I highly recommend bookmarking it for later reference.


Why Do people want to learn how to program?

This is an interesting development actually, similar to when blogging started becoming popular. There was a chunk of people who wanted to start a blog of their own because it looked like anyone could do it. Similarly, these days there seems to be a rush towards non-programmers wanting to learn how to program.

Which Is The First Programming Language To Learn?

There are so many different programming languages that sometimes it’s hard to figure out where to start. This is what I think:

  • Start with C.
  • Learn python.
  • I am a Ruby expert and I can tell you that Ruby is probably the easiest to learn. Learn Ruby to learn programming.
  • Go for Java. The world runs on Java!

These tips are for programmers who go into hardcore programming, if you are more of a designer and want to focus on creating converting websites to be able to charge more, read this article about must learn languages in 2015.

Best Way To Learn How To Code

Programming, like everything else, is easy once you know what you’re do. You just need to start programming to learn how your language of choice works. Once you’ve made some mistakes and had some success it will start to come easier to you.

  • Programming is an art and there is no ‘right way’ to learn it – C, C#, C++, Java, Ruby and all other programming languages are tools that will teach you programming. They are just tools. So now, ask yourself how do artists become artists? Well, they just start painting or drawing whatever they are passionate about. At the end of the day the journey makes them the artists. So, start trying and stop thinking.
  • Got it, Sir! But, I still need to start somewhere, right? WHERE? – There will be a list of resources at the end of this article that you can use to start learning programming.
  • How long will it take me to become a ‘real’ programmer? – This isn’t a question I can answer. If you really want to be an expert then be rest assured that it’ll take at least a decade! If you think you’re going to be the next Mark Zuckerberg remember that Zuk started programming as a child. It even took him a decade to create something like Facebook.
  • ENOUGH! Which programming language? Tell me, NOW! – Any, really. I mean it. Write each language you’re interested in on a piece of paper, put them in a hat and start with whatever language you pull out. Trust me when I say that the core of all programming languages is the same. The syntax changes and that can be grasped in a couple of weeks. The most important thing about learning a programming language is to CODE. Don’t just read books and watch video tutorials. CODE the stuff yourself. Don’t copy the program and execute it as explained in those HTML tutorials. Type the codes yourself and then execute them. Make changes in and do your own thing. Make sure that you have started to feel and understand those programs.

Now, how do I pick a project?

Actually, you should have an answer to this question. You have learned programming and now you want to create your own web application. Then why think? Just pick anything and DIY (Do It Yourself). Sound good? Go ahead, create a chess program in your programming language or a calculator. Just code something!

Useful Additional Resources To Teach You How To Code:

Enough talking. Let us all get rolling now. Here are some of the best resources that you can use to learn programming:

  • Code SchoolThis is another one stop website for those who want to learn programming. They are loaded with video based tutorials and on-the-fly coding tools that help you understand programming even when you know nothing about it.
  • Codecademy Another site that is loaded with amazing and helpful information. It has been appreciated by its users and I know that it is worth it. One of the rare, interactive ways to pickup JavaScript.
  • RockingCode – 1stWebDesigner’s own video course teaching you how to build a website from scratch to fully responsive and flat WordPress website.
  • W3Schools This was my go-to website while I was in school. It has been an amazing experience learning programming from W3Schools. They start from the basics, stick to basics and even the complex explanations on the website are pretty easy to understand. In short, it’s a perfect place to start learning programming.
  • Try RubyGot 15 minutes? Go, give Ruby a chance in those 15 minutes. The on-the-fly editor helps you learn Ruby in no time. At least it will introduce you to Ruby very quickly.
  • Try Bloc Another great member and teacher in the Ruby community.
  • jQuery Air This tool helps you learn jQuery in the browser itself. This tool will help you learn jQuery in the most practical way. Don’t miss it.
  • Hackety Well, they won’t actually teach you how to hack, but they will teach you how to program.
  • TeamTreeHouse Team Tree House has received praise from around the planet and the Internet community for the amazing work they have been doing. Try them if you are beginning to learn any new programming language.
  • PHP Know HowYou didn’t think I’d forget about PHP did you? PHP is the language that WordPress relies on to function.
  • Lifehacker’s Learn to Code Lifehacker has compiled an amazing article that teaches you the basics of coding. This article is a great starting point for anyone that wants to learn more about programming.

What Language Should I Start Learning?

Gosh! How many times will I have to tell you this. ANY! Just check out any of the resources listed in this article and start learning how to program. Let me know if you found the resources beneficial.

Powered by WPeMatico

Integrate Images from Your Instagram Feed to Your WordPress Site

Instagram has become one of the best apps and web platforms for photo and video sharing. If you have a WordPress site, you might be wondering how you can embed Instagram photo galleries and integrate images to your blog.

To help users integrate their photos to their blogs and websites, Instagram has released a public Application Programming Interface (API).

It is a seamless software-to-software interface which specifies how some software components should interact with each other without user involvement during the passing of information.

If you are not a developer, this might scare you and you might think that integrating Instagram photos and videos on your WordPress site is a rocket science.

Worry no more. This article will serve as a guide for both beginners and advance WordPress users on how you can integrate Instagram to the WordPress site using the Enjoy Instagram WordPress plugin.

Resource You Need to Complete This Tutorial

STEP 1 – Installing the Enjoy Instagram WordPress Plugin

To start off, install the Enjoy Instagram Plugin. To do this go to Plugins ->Add New and search for “Enjoy Instagram” WordPress plugin.

install

Next, click the “Install” button and afterwards the “Activate” button to activate the plugin.

activate-plugin

STEP 2 – Registering Application Using Instagram API

Now that you already installed the “Enjoy Instagram” plugin, register a new application on Instagram to be able to use its API.

To do this, first login to your Instagram account and then go to this URL: http://instagram.com/developer/

register

Next, click the “Register Your Application” button. You will be prompted to the “Developer Signup” screen.

Now go ahead and fill up the fields with your WordPress site domain, your phone number and your reason for creating the API.

Don’t forget to accept API Terms of Use and Brand Guidelines by clicking on the check box below the fields before clicking on the “Sign Up” button.

accept

STEP 3 – Registering a New Client

Now that you have registered your API, create a new client to get the API Client ID and Client Secret ID.

To do this go ahead and access this URL again: http://instagram.com/developer/

Click on “Register Your Application” button again.

register

Next, click on the “Register a New Client” button on the top right side of the screen.

register-a-new-client

You will be prompted with the “Register a New Client ID” screen. Fill up the form needed to continue and enter the Captcha details before clicking the “Register” button.

register-a-new-client

Note: You can get the OAuth redirect_uri by going into the plugin settings page on your WordPress Admin panel.

To do this, just go to Settings->Enjoy Instagram and you can copy the OAuth redirect_uri provided for your site.

settings

outh

After clicking the button, you’ll be redirected to the “Manage Clients” page which will contain your Client ID and Client Secret ID for your WordPress Site.

server-manage-clients

STEP 4 – Copying Client ID and Client Secret ID to the WP Site

Now that you have already gotten both Client ID and Client Secret ID, it’s time to paste then on the Enjoy Instagram settings page.

To do this, from the “Manage Client” page on Instagram, copy the Client ID and Client Secret ID and paste it to the form where it says “Enter your Client ID and Client Secret ID”.

31

Finally click the “Authorize Application” button to save it. You will be redirected to the Instagram’s API access request page. Click “Authorize” button to continue.

blurred

After all these steps, you will be then redirected on the plugins success page on your WordPress site, indicating that your Instagram profile has been successfully integrated.

test

STEP 5 – Creating Widgets to Display Instagram Photos on the WP Site

OK, great! You’ve successfully configured the API for Instagram. The next thing to do is display the Instagram photos on the sidebar with the use of widgets.

To do this, go to Appearance ->Widgets. Add the “Enjoy Instagram Grid Widgets” on the main sidebar and configure it to your preferred settings.

6

Now, if you are going to check on the front page, you’ll see that your Instagram’s photos are already displaying on the sidebar of your site.

7

Additional Option: Displaying Instagram Photos via Hashtags

If you prefer to display photos using hashtags instead of your own photos, you can navigate on the Enjoy Instagram settings page under “Settings” tab. Just click on the hashtag radio button and enter the hashtag you prefer.

8

Note: Don’t forget also to click on the hashtag radio button on the the “Enjoy Instagram Grid Widgets” when adding it on the sidebar.

Conclusion

Enjoy Instagram is a flexible Instagram plugin that lets you display your images in a grid or a carousel. What is more great about this plugin, aside from the hashtag additional option, it is also optimized for mobile devices which offers touch support to mobile users .

What tools do you use to easily display Instagram images on your website? Let us know in the comments section below.

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

Twist That Code: How to Add Custom Buttons for WordPress TinyMCE Editor

WordPress version 3.9 uses TinyMCE version 4.0 core, an open source HTML WYSIWYG editor by Moxiecode Systems, AB. This means that all of the buttons you see on your default theme posts and page editor comes from the TinyMCE plugin. WordPress TinyMCE editor version 4 provides comes with the following changes:

  • New UI and UI API
  • New theme
  • Revamped events system/API
  • Better code quality, readability and build process
  • Lots of (inline) documentation

Using the TinyMCE Visual Editor has a lot of benefits as you don’t need to add styles or shortcodes manually. Instead, you can style elements in just a couple of clicks. Unlike other simple plugins, it may take some time to figure it out how to customize or add functionality to the TinyMCE editor.

In this article, you will learn how to add custom button on your WordPress TinyMCE Visual Editor using the previous tutorial about creating tooltips shortcode.

Resources You Need to Complete This Tutorial

  • WordPress Installation
  • Basic Knowledge about PHP, TinyMCE, JavaScript and CSS
  • Time and Patience

What We Are Going to Build:

final

Getting Started

TinyMCE is great for Shortcodes. Most users are comfortable clicking buttons than putting codes manually to display a particular feature or style. You are going to use the following code to display a tooltip text along with its position.

[tooltip class="top_tooltip" title="This is a tooltip"] TEXT[/tooltip]

Now, see how you can add a custom button on the TinyMCE editor for this Shortcode.

STEP 1 – Create a Function That Will Filter a Series of Functions

The first thing you need to do is to create a function that will filter series of functions. You will check if user has permissions and then check if TinyMCE is enabled before finally hooking it using the add_action function. Check out the codes below.

// Filter Functions with Hooks
function custom_mce_button() {
  // Check if user have permission
  if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
    return;
  }
  // Check if WYSIWYG is enabled
  if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'custom_tinymce_plugin' );
    add_filter( 'mce_buttons', 'register_mce_button' );
  }
}
add_action('admin_head', 'custom_mce_button');

STEP 2 – Adding and Registering New MCE Plugin for WordPress

Next, you will create another function to create the new custom button. The code will have the path of the JavaScript file that will handle the option of your custom button later on.

In this part of the tutorial, you can name your JavaScript file as editor_plugin.js but, please, feel free to use any name you want for the file.

// Function for new button
function custom_tinymce_plugin( $plugin_array ) {
  $plugin_array['custom_mce_button'] = get_template_directory_uri() .'/editor_plugin.js';
  return $plugin_array;
}

Then, register your new button using a new function. You will parse the variable buttons to make sure it will display the button that you’ve added above.

// Register new button in the editor
function register_mce_button( $buttons ) {
  array_push( $buttons, 'custom_mce_button' );
  return $buttons;
}

STEP 3 – JavaScript for the Custom Button

The next thing you need to do is create the JavaScripts file that registers the custom_mce_button function. This will simply add a new button, that, when user click it, will display the text “Hello World!”.

(function() {
    tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
        editor.addButton('custom_mce_button', {
            text: 'Tooltip',
            icon: false,
            onclick: function() {
                editor.insertContent('Hello World!');
            }
        });
    });
})();

OK, great! You’ve made it! But it’s not done yet. The next series of codes will add the meaty part on your tooltip Shortcode. Replace the code above with the following codes.

(function() {
    tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
        editor.addButton('custom_mce_button', {
            icon: ‘false’,
            text: 'Tooltip',
            onclick: function() {
                editor.windowManager.open({
                    title: 'Insert Tooltip',
                    body: [{
                        type: 'textbox',
                        name: 'textboxtooltipName',
                        label: 'Tooltip Text',
                        value: ''
                    }, {
                        type: 'listbox',
                        name: 'className',
                        label: 'Position',
                        values: [{
                            text: 'Top Tooltip',
                            value: 'top_tooltip'
                        }, {
                            text: 'Left Tooltip',
                            value: 'left_tooltip'
                        }, {
                            text: 'Right Tooltip',
                            value: 'right_tooltip'
                        }, {
                            text: 'Bottom Tooltip',
                            value: 'bottom_tooltip'
                        }]
                    }, ],
                    onsubmit: function(e) {
                        editor.insertContent(
                            '[tooltip class="' +
                            e.data.className +
                            '" title="' +
                            e.data.textboxtooltipName +
                            '"]' +
                            editor.selection
                            .getContent() +
                            '[/tooltip]'
                        );
                    }
                });
            }
        });
    });
})();

The code that you see above will add a pop-up Window that will let the user add the tooltip text and its position.

After highlighting the text, the user can click the tooltip button and this pop-up Window will appear. When the submit button is clicked, it will add or insert the tooltip Shortcodes along with the data the user inserted on the Pop-Up Window. tooltip

Adding Icon to the Custom Button

There are two ways that you can add a custom icon for the custom button on TinyMCE editor.

  1. Adding a custom image URL path to existing stylesheet.
  2. Creating a function to hook the icon’s URL path.

Adding a Custom Image URL Path to Existing Stylesheet

To add a custom image URL path to existing stylesheet, you will simply need to declare a class with the URL path of the image you want to use.

i.custom-mce-icon {
  background: url('../images/tooltip.png');
}

Next, you just need to add class you’ve just created to the icon option.

(function() {
        tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
                    editor.addButton('custom_mce_button', {
                                icon: ‘custom-mce-icon’,
                                text: 'Tooltip',

Creating a function to hook the icon’s URL path

To display the icon using the function, you just need to add a function to load a new stylesheet for the admin panel use.Then, create the file and add class of the image and change the icon option to the class you just created.

function custom_css_mce_button() {
    wp_enqueue_style('symple_shortcodes-tc', plugins_url(
        '/css/custom_style.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'custom_css_mce_button');
(function() {
        tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
                    editor.addButton('custom_mce_button', {
                                icon: ‘custom - mce - icon’,
                                text: 'Tooltip',

What’s next?

Adding custom buttons to TinyMCE is not that hard. I hope that this article helps you add a custom button to your WordPress Visual Editor.

If you are not comfortable doing all this stuff, you might want to use the Custom TinyMCE Shortcode Button plugin. This allows you to add a custom button to TinyMCE which will insert a custom shortcode into the editor. Feel free to tweak and use the codes on your project.

If you have any thoughts about this tutorial, just drop a line on the tutorial.

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

Energize Your Static Website with this WordPress Conversion Tutorial (Part 1)

Web design and development are one of the most in-demand skills in last years. Agree?

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You’ve probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays. This is the very reason why it’s important that there should be WordPress conversion of your site from HTML and CSS.

At first blush, there are a number of reasons why you would choose to have a static (HTML and CSS) website.

Why do people have static websites in the first place?

  • You want to make it easier to customize your site even if you are not a developer.
  • A static website is supported on almost every browsers.

But when it comes to functionality, a dynamic site like a WordPress site is the best way to go.

Why?

  • Static websites cannot produce dynamic output alone since it is built on a static language.
  • Faster turnaround. You need not spend a lot of time on getting the colors and layout right. You can go straight to admin panel to customize it.
  • Templates look much better than sites developed in traditional static HTML sites.
  • You don’t need to code if you want to add a page or a post. Simply go to the admin panel.
  • Security features offered by HTML are much more limited than a dynamic site like WordPress.

If you started with a static (HTML and CSS only) site, you don’t need to throw it all away when you want to move to WordPress. However, converting your HTML-and-CSS-only site into WordPress might require some programming knowledge like PHP and jQuery to run the static site on the dynamic WordPress platform.

In the previous tutorial, you learned how you can create a WordPress child theme. This WordPress two-part tutorial series will introduce the basics of converting the markup into a fully functional WordPress theme using the built-in NeoBlog HTML and CSS theme.

At the end of this tutorial, you will learn how you can convert your static HTML and CSS site into a fully driven dynamic WordPress site.This tutorial aims to provide more flexibility to the site owners, thus, giving you more power to do more on your site.

Resources You Need to Complete This Tutorial

What We Are Going to Build

Final_theme

What Codes Should Readers Take Note Of?

A WordPress theme is a way of ‘skinning’ the external design of your website. The theme can make a big difference to the overall look of your site. It offers a graphical interface via the WordPress template files.

In creating a WordPress theme, it is worth to note the following:

  • Be careful of the name of the templates file you created. By default, WordPress recognizes the default template name such as single.php and page.php file. I recommend checking the name of the default WordPress template before naming or creating a new custom file.
  • Check out WordPress Codex for some functions, tags or some other PHP codes before using it on your template files. This will keep you on the right track on what you want to do in your codes.
  • Sometimes you need some external jQuery files to improve the look of your WordPress theme or add some functionality. WordPress will not provide everything in a box.
  • Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
  • Use clean, valid CSS. See CSS Coding Standards.
  • Follow design guidelines in site design and layout.
  • Backup your files. You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins you are using as well as some other files related to your theme development.

Why You Need to Take Note of PHP?

PHP is a programming and scripting language that creates dynamic interactive websites. It is a widely-used and open-sourced general purpose scripting language that is especially suited for web development. In addition to that, this programming language can be embedded into HTML.

WordPress is written using PHP as its scripting language. This has an open source license, certified by the Open Source Initiative. Just like WordPress, PHP is also open-sourced.

Some parts of the WordPress code structure for PHP markup are inconsistent in their style so it is important you have a basic knowledge about PHP.

However, you don’t need to be a PHP web developer to create a WordPress theme. You just need to have a solid foundation about HTML, CSS, JavaScript as well as a basic background on PHP.

Just in case you need to know more:

How Does This Work?

First, you will identify first the files you need to create to build a complete WordPress theme. The next step you will do is to start putting codes on each template files.

Along the way there will be functions that might not be clear to you. In this case, the WordPress Codex will be your best friend.

After you created each template, you will add contents to your theme to test if the whole codes you are using are working on your site.

Getting Started

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.

Please take note that the name of the folder should correspond to the name of the theme you want to create. For this tutorial, it is named NeoBlog.

file-folder

The Template Files

Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

These are files that contain the codes to make a working WordPress theme. To do this, create the following files into the NeoBlog theme directory:

  • css folder – This folder contains all the stylesheets. Copy this folder from the NeoBlog HTML and CSS theme.
  • fonts folder – This folder contains all the external fonts used in the markup. Copy this folder from our NeoBlog HTML and CSS theme.
  • images folder – This folder contains all the images such as the logo and so on. This folder will be copied from NeoBlog HTML and CSS theme.
  • js folder – This folder contains all of the javascripts. Also, copy this from the NeoBlog HTML and CSS theme.
  • header.php – This file will contain the code for the header section of the theme.
  • footer.php – This file will contain the code for the footer section of the theme.
  • index.php – This is the main file for the theme. It will contain the code for the Main Area and specify where the other files will be included.
  • functions.php – This file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.
  • single.php – This file will contain the basic layout of a blog page.
  • page.php – This file will contain the basic layout of a page.
  • page-about.php – This is a WordPress’s built-in Post Types template. If a specific page, or a group of pages should behave or display differently, this is easily accomplished with this page template. For this template, it will display an About page layout
  • page-contact.php – Another type of WordPress’s built-in Post Types template. This template will display a contact form on the pages it was set.
  • content-search.php – This file will run the loop for the search to output the results.
  • search.php – This file is responsible for displaying search results pages.
  • searchform.php – This file contains the layout of the search form.
  • comments.php – This file will contain the code for displaying comments.
  • sidebar.php – This file will contain the sidebar widget area.
  • 404.php – This file will return a “Not Found” notification if a particular search query is not found or doesn’t exist in the database.
  • style.css – This file will include all of the styles and information of the NeoBlog theme.
  • screenshot – a png image file, that should accurately show the theme design or the title of theme. For more information see check this page.

Over the course of this tutorial, codes are going to be added to these files that will include menus, hooks, loops and widgets.

For this part of this tutorial series, you are going to work on the following:

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

STEP 1 – Copying Necessary Files to the NeoBlog WP Theme

To get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder.

file-folder

STEP 2 – Naming Your WordPress Theme with style.css

Before stating with the template files, first add the links of the stylesheets of the NeoBlog HTML and CSS theme to the NeoBlog WP theme. Go ahead and create the style.css file on NeoBlog WP theme and then copy the code below.


/*
Theme Name: NeoBlog
Theme URI: http://www.1stwebdesigner.com/
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("css/reset.css");
@import url("css/bootstrap.css");
@import url("css/style.css");

There is nothing special here but the information about the theme such as the name, author, author’s website and so on are enclosed within comment tags. This will make the theme easily identifiable upon installation.

It also has a series of @import tags. This will link the stylesheets from the CSS folder to the main stylesheet of the NeoBlog WP theme, which is this file.

STEP 3 – Adding a Screenshot Image File

Now that the theme has been successfully named thru style.css file, add a screenshot of the theme. Create an 880 x 660 px file in Photoshop and put a title text, the short description and the author of the theme on it.

The screenshot will only be shown as 387x 290 px on the WordPress admin panel, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

screenshot

Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme.

STEP 4 – Activating the Theme

After adding the screenshot of the theme, activate the NeoBlog WP theme.

But before doing that, to check on if the theme is working or not, create first a blank index.php on the root directory of the NeoBlog WP theme (don’t worry codes will be added on this later on).

Next, activate the theme, go to the WordPress admin panel and mouse over your mouse to Appearance -> Themes. Click on the Activate button.

themes

activate

If you are going to check the NeoBlog WP theme on the front end, you will notice a blank page because you have not put anything on our index.php file yet.

Major Issues You Might Encounter While Trying This Tutorial

While trying out this tutorial, you might have issues with combining PHP codes with the HTML codes.

What you should do

Double check it. It is better that, by this time, double check your codes. Sometimes you might forget putting an end if or end while statement inside a WordPress loop.

The code below will have an error since it does not have an end if statement:

For example:

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

The code you see below will solve the issue.

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

It would also help if you can check the the ending and closing tags of your PHP codes; otherwise, the codes might not work when mixed with HTML codes.

If you want to learn more how to add more functionalities on this blog, you might want to check and study the WordPress Codex.

What Limitations Does This Tutorial Have?

Although this tutorial will give you a head start on how you can create a theme, there will be limitations on this one.

It can only provide the basic features of a blog theme such as the sidebar, footer, search box, post list, featured images and so on.

Some More Recommendations

If you want more features you can try to study the WordPress codex as well as online courses on tutplus.com or Lynda.com in creating an advanced theme.

But Wait!

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

Do you want to know what the contents this playlist? Don’t worry, a list has been provided so you know what to expect:

  • Introduction: What Do You Need to Build a WordPress Theme
  • Copying Necessary Files to the Theme’s Folder
  • Naming Your WordPress Theme with style.css
  • Adding a Screenshot Image File
  • Activating the Theme

Round Up

Great! We are done with the first part of this two-part series tutorial. In this article, you learned how to set up template files, things to avoid and some notes to look out for as well as the steps in creating 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

If you’re using WordPress, you’ve probably spent a long reasonable period of time searching for a theme you like, only to find out that you’ve been looking at the same theme designs in a variety of colors with just different set-up of elements. Maybe, it’s time you learned to create your own WordPress theme.

This series of tutorial will help you learn to convert an HTML and CSS template at the same time build your first basic WordPress theme. We’ll get under the hood and see how a basic theme works by going over on the template files required to build a fully functional WordPress blog theme.

Our HTML file is now prepared and ready to be converted into a set of theme files. In the next tutorial, Let’s work on some template files and add functions to support some functionality of your WordPress theme.

It wasn’t as bad as you think it would be, right? Don’t forget that this is just the first part. If you can’t wait, do try this part and tell us what you think in the comments below.

Powered by WPeMatico

The Zen of Relational Database: Learn the Basics Here!

Databases have been a staple topic on every digital business. Thus organizing the tables and fields is necessary. The concept of Relational Database was born way back in 1969 when Edgar F. Codd, a researcher from IBM, wrote the process of outlining a database. From there, the this concept has spread on every computing-involved business and task.

According to Wikipedia,

  A relational database is a database that has a collection of tables of data items, all of which is formally described and organized according to the relational models.

This means that using the relational model, each table arrangement must be identify a column or group of columns to distinctly identify each row also called as primary key.

Using a foreign key, it can be used to establish a connection between each row in the table and a row from another table.

To properly organize a database, it involves database normalization. This is the process of organizing the tables and fields of this kind of database to minimize redundancy of information.

That being said, using definitions and terms alone won’t make you understand this topic. In this article, you’re going to learn how you can properly structure this specific database. You are going to look on two fictional tables and start working on it.

The Data

For the data, below, the base table includes two tables: Student table and Class table.

This database maintains data about the Student’s information and Class information.

Each student will have a unique Student ID (which may consist of letters and numbers) but may have similar name, operating system, class and instructor. One instructor may teach more than one class.

The Student table will have the following fields:

  • Student ID
  • Student Name
  • Operating System

The Class table will have the following fields:

  • Class ID
  • Class Name
  • Instructor

base-d

Now to expand the data, below presented are the Student table and Class table.

student_table

class_table

Identifying the data objects and relationships between tables

Now using the given data, you need to identify the data objects and relationship that need to be maintained in the database.

Looking at the Student and Class tables, you can conclude that the data objects are Student and Class. The relationship is that one student can have one or more classes.

Identifying Relevant Attributes: Primary Key and Foreign Key

Now that data object and relationships between the two tables have been defined, specify the relevant attributes between the two.

If you are going to check the two tables, you need to find the unique column for each table. Notice that you have only 1 row on each table that contains some unique data.

For the Student table, you have the Student ID while, in the Class table, you have the Class ID. These two rows are called the Primary Key.

The primary key of a relational table uniquely identifies each record in the table.

primary-key

Next, for the relationship, you need to determine its attribute(s) and identify its Foreign key.

The foreign key matches the primary key column of another table. The foreign key is used to cross-reference tables. In this case, you will use Enrollment as our new field to connect the two foreign keys:

  • Enrollment (Student ID) attribute is a foreign key referencing the Student (Student ID) attribute from the Student table.
  • Enrollment (Class ID) attribute is a foreign key referencing the Class (Class ID) key attribute from the Class table.

Using Relational Tables

Now that you have identified your primary key and foreign key, you need to create a relational table to represent the data objects and relationships with their attributes and constraints.

See table below:

foreign-key

The foreign key Student ID in the Enrollment table references the primary key Student ID in the Student table.

The foreign key Class ID in the Enrollment table references the primary key Class ID in the Class table.

In the table above, you created a new row called Enrollment ID to relate both Student ID and Class ID, which is also define the foreign keys.

Conclusion

That’s really it! That is how you to create a database of this kind. When creating such databases, you can define the domain of possible values in a data column and further constraints that may apply to that data value.
It also requires the normalization process to remove the redundant data and connect all of the tables into one table.

In this article, you learned something about the concept of such database and how to design one; so, how do you implement one?

If using Relational Database Management Systems (RDBMS) software is your answer,  you are correct! But I won’t be discussing the process in this article.

I will create another article for that soon. Hope you learned something from this article and let me know about your thoughts on the comment section.

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