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:
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
In this file you should add the following code:
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
tells WordPress to load the style.css file. It will handle the styling of your website.
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.
The code in this file begins with
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
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
which will include the footer.php file in your page.
In the sidebar.php we will add the following code:
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).
You should add these lines to the footer.php file:
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.
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:
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!
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
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.
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
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.
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!
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.
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
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
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
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
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
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.
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?
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?
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?
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?
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?
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?
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.
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
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
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
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
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.