Loading...

Contact

Blog

Top Stories

Descover New Ideas!

How to Create WordPress theme from HTML?

06 Mar 2017 by Ravi Sah
Wordpress

If You know HTML+CSS+Javascript and create beautiful websites than you can create Wordpress themes for yourself or your clients easily. You can convert your HTML pages into Dynamic Wordpress Platform or can create a full-fledged Wordpress website for your client. If you are newbie than you can get basic learning of Wordpress design programming to get more familiar with it.

Whatever reason you are here to Today, I will show you how to create a simple WordPress theme. Follow below guide to create your theme from scratch.

Choosing the Name & Layout for Theme

First of all give your theme a unique name, create a sub-folder in the wp-content/themes directory in your WordPress folder. For example, create a folder "demosite_theme". The name of the folder should correspond to the name of the theme you want to create. To do this you can use either your favorite FTP client or the File Manager tool in your cPanel.

Before you start creating the theme, you should decide how the layout of your website will look like. In this tutorial I will build a WordPress theme that consist of a header, content , sidebar and footer as shown below:

Page Structure

To do this you will have to create the following files into the tutorial_theme directory:

header.php - This file will contain the code for the header section of the theme.
index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included.
sidebar.php - This file will contain the information about the sidebar.
footer.php - This file will handle your footer.
style.css - This file will handle the styling of your new theme.

You can either create those files locally with a simple text editor(like notepad for example) and upload them via FTP or you can use the File Manager tool in your cPanel to create the files directly on your hosting account.

Converting your HTML Template into PHP Files

Header.php file

In this file you should add the following code:


<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>

This is simple HTML code with a single line containing a php code and a standard WordPress function. In this file you can specify your meta tags such as the title of your website, meta description and the keywords for your page.

Right after the title the line we add


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

tells WordPress to load the style.css file. It will handle the styling of your website.


<?php bloginfo('stylesheet_url'); ?>

The part of the line is a WordPress function that actually loads the stylesheet file.

Next, we have added the beginning of a "div" with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.

After that we have added a simple label HEADER wrapped in a "div" with class "header" which will be later specified in the stylesheet file.

Index.php File


<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

The code in this file begins with


<?php get_header(); ?>

which will include the header.php file and the code in it in the main page. It uses an internal WordPress function to do this. We will explain this in details later in this tutorial. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.

The next few lines consist of a PHP code and standard WordPress functions. This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.

Next, we include the sidebar.php file with this line


<?php get_sidebar(); ?>

In this file you can display your post categories, archives etc.

After this line, we insert an empty "div" that will separate the Main Area and the Sidebar from the footer.

Finally, we add one last line


<?php get_footer(); ?>

which will include the footer.php file in your page.

Sidebar.php File

In the sidebar.php we will add the following code:


<div id="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the < ul > tags).

Footer.php File

You should add these lines to the footer.php file:


<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

With this code we add a simple FOOTER lable. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.

Css Stylesheet file

Add the following lines to the style.css file:


body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%;  margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

This simple css file sets the basic looks of your theme. Those lines set the background of your page and surround the main parts of your site with borders for convenience.

At this point your website should look like this:

Wordpress Page

As we have previously mentioned, internal WordPress functions are often used in the code of the theme. You can take a look at the complete Function Reference at the official website of WordPress for more information about each function.

Thats easy, right? from now on you can style the CSS file as you like, add images, animations and other content to your theme in order to achieve the looks you want for your blog!

Continue Reading...


10 Qualities that every Creative Web Designer Must Have

22 Feb 2017 by Ravi Sah
Creative Web Designer

If you have always been a fan of creativity, internet and innovation, and passion towards the artistic spirit, then you must have been squandered all, the designing and sketch related stuff online. I was always fascinated by the website designs, how they could be changed for better, what sorts of colours would attract the users, and eventually I became a website designer. So, if you are still searching your career option or a startup owner looking for a good website designer for your project, then this is a good post to start with. I have compiled 10 of the most crucial skills and qualities that every Creative Website Designer must have.

Sound Expertise on Coding

The first and far most important way to spot a good web designer is to check hi coding skills and knowledge. Though it is not an essential for a creative guy to be proficient with the coding and be a specifically technical guy, then again, he/she should have a good command in at least 1-2 languages.

It is always profitable to hire a web designer who has mastered only one language rather than a guy who is aware of many different languages but is always founded on Stack Overflow to correct his bugs and code errors.

A Keen Eye for Design

A Keen Eye for Design

One more crucial differentiator is the artistic sense of the designer. A person who is always looking for new ideas, patterns, layouts and even a small animation in-between the websites, apps, and designs is the one you seek. Having a keen sense and eye for creative designing means you are going to create something that looks visually attractive and should also be efficiently integrated with the backend. Remember 70% of your audience visits the site again just because of its ease of use, design, and content. Rest of the 30% care for the technical knowledge available on the website.

Should be Aware of the Trends

One more important thing to look out for your designer is that he must be aware of all the on-going trends like parallax, responsive sides, integrated footage, and much more.

Java and CSS are not only the basic tools that your guy must be known to. There are a lot of other important designing assets like InVision, a tool used for the prototyping purposes.

His Work Should Reflect his Ideation

No matter how good the designer codes and ideates your visual designs, you always praise the final product, i.e. the website design or the UI for an online service. Be sure to look or enquire about your web designers portfolio. Since action speaks louder than words, you can quickly judge that how deep the designer can dig too. There are some designers who migrate from entirely different design to another and change the industry as well, while others get stuck in a repeated rut and follow the same designing trend or pattern in their work.

Should be Easily Able to Conceptualize & Ideate

It does not matter, what kind of designer you are, a graphic or web designer. You must be able to understand the designing concepts and the requirements. After all, the one thing thats going to work is to satisfy the whim of your client. Therefore, you should easily distinguish between the designing processes and the customers requirements while working under the proper budget.

Conceptualize & Ideate

It is very much important to design a website that explains the companys work, brand or the product that they want exposure for. After all, a website is a corporations identity nowadays.

Psychological Understanding of Web Visitors

This might not be a skill that you can easily identify in a designer. Since the final design or the product is going to be viewed or visited by the users only; the designer must have a psychological understanding of what impresses a website visitor or user. It can be either the knowledge of having the appealing colours that are pleasant to the eyes or the engaging animations and checkboxes. Visual influences are the primary causes, fashion and e-commerce websites keep it as simple as possible since their aim is only to highlight the selling product and not the site.

Should Be Aware of the User Engagement & Traction

Heat Map

It is cordially related to the previous point but in a more technical way. Make use of heat maps. A heat map is a remarkable tool that one can use to improve his wireframing and layout practices. A heat map correctly shows all the areas on the website or a page where the most of the users will most to click and see the content. Even though it is a small piece of information, but you can benefit a lot from it. You can place check boxes, forms, and promotional content on the most highlighted areas as it would increase your user traction on the website.

Internal Mark-up Coding Skills

Just like a tall building requires a solid base to setup, just like that a good website also requires a clean and structured internal coding, also known as Mark-up. The more efficient the code would be, the faster the website would load and run. The designer should always keep a check on the number of errors or design breakdowns during the testing. Before handling over the final design to client, he/she should reduce the error count to 0.

Should Pay Attention to the little things

The more observant you are, the better designer you will turn out later. The ability to see the minute details in a larger picture proves the artistic sense and observation power of the designer. These are real skills that are sold in the professional industry because everyone can learn to code, but only a few are aware of what you need to code.

Designs should be SEO Friendly

This just means that the website that you are designing for should be compatible with new rules and changes in the SEO, keywords, indexing, and other necessary things. One the more important point is to conduct a Broken Link Check as they are not healthy for the SEO of the clients website.

Final Words

The Design/UI is just like a joke. If you have to explain it, then its not okay. All in All, these are the top qualities that you must look for while hiring or choose a web designer. Same goes for the enthusiastic learner, who wants to make a career in this creative industry. Cheers!

Continue Reading...


5 Reasons To Use Bootstrap for Web Design

03 Feb 2017 by Ravi Sah
Bootstrap

Gone are those difficult days of developing web designs without having any developer friendly environment and visual less processing. Let's say you are generating web designs from quite long and use the same software or framework from the very beginning till now. Here, a simple question arrives in the mind that how can a developer operate an outdated coding environment which lacks customizability and other significant features?

It's very much challenging to code in such a way. To make perfect designs, you need a highly customizable and feature-rich skeleton. You might have geared up with a quality rich framework to develop in HTML, but it is hard to stick with it. This is because we are influenced by the traditional human nature, and we try to find out cons in it.

However, the only framework you can choose to develop your web designs with quality is Bootstrap. You can surely select it with closed eyes and start working with a spree and dedication. Yes, Bootstrap is one of the most popular front-end framework available in the world.

If you are juggling with frameworks to find out a perfect skeleton which is easy to get stared with your projects, then trust me Bootstrap will be the ultimate solution to it.

If you aren't aware of the term 'front-end framework' then don't get sad as before telling you the reasons to use Bootstrap for web designs, I will tell what a front-end framework is.

A front-end framework is a simple platform for developers to work, on which software solutions are built in especially while talking about web interface. That mere information will be sufficient to move on to the article. But, you don't be stressed; I know it's better to gain complete knowledge rather than being satisfied with half of it.

If you are new in web developing; then you can choose Bootstrap as your priority if you want to get started on a web-based project. Many developers around the globe are using this due to it is flexibility. Extending it further, explains, Bootstrap is a responsive, mobile-first, customizable, and front-end framework, crafted along with CSS, JavaScript, and HTML.

Do you want to know why you should get started with Bootstrap and why others are using it? Then you should look below in the collection of reasons why you should choose Bootstrap for your web designs.

1. Easy to get started

Easy to get started

Unlike other frameworks being used for creating visual designs for website, it isn't much complicated to use and start. You have everything arranged and easy to use. Any newbie can opt Bootstrap framework for his projects.

2. Responsive Development

Responsive Development

What other frameworks lacks are present in Bootstrap. One of such features is responsiveness. Yes, it's the time of smartphones and having a non-mobile-ready site is a kind of shame itself. However, replacing your current Framework with Bootstrap would be a right step towards your career.

3. Development Speed

Development Speed

Starting from scratch is surely a good idea, but with less time available you should not do that as it will consume much time. So, that's where you Bootstrap stands out, and you can completely utilize it to develop a web-based application or a website. You must use ready-made coding blocks to give your project wings. CSS-Less functionality and cross-browser compatibility is another thing which can save ample of hours to code.

4. Highly Customizable

Highly Customizable

Bootstrap is highly customizable as it provides you multiple features to choose to develop without much disturbance in your assignment. What you need to do is to check all the characters that you do not need to disturb you in your development, such as- Common CSS: typography, code, grid system, tables, buttons, forms, print media styles.

5. Grid System

Grid System

Bootstrap is capable of providing a 12-column grid that is fast and responsive. It is easy to maintain and offers nested elements.

These are the top reasons to use Bootstrap for your all web based projects. I can assure you that it will provide you a distraction free atmosphere to work and with less coding required any newbie can use it, and it will give quite good results. Choosing this will be a right decision and this framework will withstand with all of your requirements.

Continue Reading...


Questions You Should Ask Before Hiring a Web Design Company

13 Jan 2017 by Ravi Sah

Hiring a Web Design Company is a crucial decision as you are not only giving them the responsibility of the website but also the exposure your website gets will affect the business.

Potential clients will be interacting via your company's website itself.

1. What are the service plans and pricing for them?

What are the service plans and pricing for them?

There will be different service plans offered by the web design company. Make sure to go through all of them before choosing the one that best suits your requirement for your website. The time taken for delivering the desired results should be thoroughly discussed before. Based on the project's needs the company should be able to tell that how much the completion will require realistically. How the pricing is done? It can be based on hourly rates or flat fee according to the agreement.

2. Who all are in your team and how qualified are they?

Who all are in your team and how qualified are they?

The web design company's staffs is composed of the real people that will be dealing with constructing your website and knowing their qualifications will assure you that you have the best team at your service. Will the project be headed by a dedicated project manager? The firm should have in-house development teams.

3. Which clients have you dealt with before and of which industry?

hich clients have you dealt with before and of which industry?

If the web design company has worked with clients from industries like yours then it might be easier to work with them as they have already dealt with such orders and are well aware of the industry standards. How are the results measured? And also what were the reviews sent by the clients they worked with before. What is the definition of a successful web development project?

4. Will the website be responsive and do you provide SEO expertise?

Will the website be responsive and do you provide SEO expertise?

Most of the visitors on your website will be accessing it through smartphones or tablets. Responsiveness is not an option but a necessity. The website should be able to customize itself according to the screens it is accessed on. Providing a good SEO expertise will get more traffic to your website and bring the website up in various search engines.

5. What is the size of the company and its structure?

What is the size of the company and its structure?

The size of the company is proportional to the size of the team which will work on your project. If the team is small it can lead to delays and if the team is too large it can lead to lack of coordination between the designers and developers. The company should have a stable structure to help you trust them with working on your website. Which parts of the projects are produced in-house and which are outsourced?

CONCLUSION

Making sure to ask these questions before hiring a Web Design Company will guarantee you of receiving the best possible results and that too at an affordable price. Potential client's experience on your website should be hassle free. A website determines the presence of one's business in the virtual world.

Continue Reading...


5 Quick Tips For Landing Page Design

10 Jan 2017 by Ravi Sah

1. Minimalistic Approach

Minimalistic Approach

Make sure to keep the strategy and layout of the website minimalistic. Too much of things cluttered up together tend to be confusing for the user visiting your website. People should be able to understand what the company does as soon as they land on the webpage. Let the attention be directed to the most significant section of the website. For a more professional look, place a logo of your company as the link to the landing page or the homepage of your website. Navigation methods should be clearly visible and easy to use for a better user experience. Finding information on the website should not be hectic task. Include a button to navigate to home page on every page of the website.

2. Web Design Templates

Web Design Templates

Before starting designing the final layout for the website make sure to do a bit of digging up on different model designs available over the internet. Google designs give you variety of choices. It is a group of designers and developers at Google. It is always better to see all of the options so that you choose the best one according to your type of website. Earlier, sidebars were extensively used. But surveys have shown that people hardly use sidebars and they are left as a cluttering feature of the website.

3. Choose THE RIGHT Imagery

Choose THE RIGHT Imagery

While choosing the images to be displayed on the website, it is critical that the images should be taken by a professional photographer i.e. it should be of fine quality. The images should comply with what the website is about. The combination of quality content and the right imagery is the key for enhancing the user experience.

Poor quality pictures can decrease the attractiveness of the website to a great extent. Avoid using free pictures available on various platforms. For the best results, invest in some money and choose the premium images of the finest quality. Use these images in a slider to bring focus on the key topics.

4. Text & Colour Scheme

Text & Colour Scheme

The colour scheme of the website should be pleasing to the eye. Always use mild colours rather than colours which might be too tacky to look at. A simple colour scheme will give your website a more polished look. They should never obscure the text content of the webpage.

Typography is the most essential feature of a website. The text is almost every time preferred to be black, avoid coloured texts unless they are hyperlinks which should be blue as per the usual guidelines. Every button should have text, avoid icon links. All the visitors may not be able to decipher what each icon stands for. Most commonly used fonts are Arial, Georgia and Time New Roman.

5. Responsive Website Interface

Responsive Website Interface

In the current scenario, 80.5% of the web visitors are accessing your website from devices like Smartphones and tablets as compared to computer systems. So, responsiveness is not a choice but a need. The websites layout and navigation through the content should be as easy on a Smartphone as it is on a desktop.

The text should be easily readable on a mobile version of the website and the images used should accordingly resize themselves to provide the best fit for every screen size. The theme of the responsive website should be according the companys product. Along with being responsive it should be load quickly on varying internet speeds. Also, do not forget to add social media share and follow buttons. They will help to increase the reach of your websites content.

Continue Reading...


Ready to discuss your project?

Close Free Consuting Form
Responsivness

Free Consultant

100% Privacy. I never share your details.

Close Free Consuting Form

Project Detail