What's WP
Our everything is about WordPress - best choice of WordPress users!
How To Create a Custom WordPress Theme? | WordPress Tutorials

How To Create a Custom WordPress Theme? | WordPress Tutorials

 create custom WordPress themeWordPress theme easily helps customize a WordPress to be beautiful, stylish and unique. However, sometimes, the purchased theme or free theme from third party companies cannot satisfy the wide range of needs. Therefore, it’s time to build a custom WordPress theme according to the actual requirements.

In below, we have introduced some tips concerning about how to customize WordPress theme correctly and effectively. Note that this tutorial is not only written for those who have the basic coding knowledge but don’t know how themes work, but also for those who are totally new in this field.

Customize Current WordPress Theme

 create custom WordPress themeTo create a custom WordPress theme, you can make a change on your currently-use theme by following these steps.

  • Edit an theme that is existed.
  • Modify the existing theme.
  • Use a theme framework to create a new theme.
  • Build a custom theme with Scratch.

In below, we introduce each approach in detail.

1.Edit the theme.

This is the easiest and quickest approach to create a custom theme and achieve the effect you expect. By editing the theme which you have downloaded or used, you can see the styling of the theme and make some modifications. If you know some coding skill and html knowledge, this way can be quite easy and effective, and bring the following advantages:

  • Beautiful and stylish. After being customized, your theme is quite beautiful and stylish, with the amazing pictures or drawing of your own.
  • Unique & The Personality. Always, a theme from the third party companies is widely used by thousands of websites, which results your site be same with others. However, after customizing, your site is unique in the web.
  • Compatibility. After being created, your theme is designed with your actual needs. So all the functions are needed and suit your website content. Your theme is more compatible with the content, making the site more harmonious and more comfortable to visitors.

If you decide to go down this way, backup your theme at first. Because you may get yourself into a big mess, and even destroy your theme completely if the theme is not well coded or modified. To create theme, you just need to go to each theme file and modify them as you want.

2. Modify an existing theme.

This approach is widely used by people because it doesn’t need to write any code. The Theme Customizer provides a WYSIWYG interface to allow users customize a theme by clicks. With it, you can change images, colors, titles, and the layouts of your theme.

3. Use a theme framework.

Using a theme framework to create a custom WordPress theme is an efficient approach used by thousands of WordPress designers and developers. There are a large number of theme frameworks exist, such as Theme Hybrid, Wonderflux, Arrington, Thematic, etc that are free of charge and you can use as a kind of parent theme. Besides, with much more functionality, you can make fancy layout and style changes without writing a line of code.

4. Build a custom theme with Scratch.

Building a custom theme with Scratch is the most difficult method. However, if you are an experienced developer, it can be the best method and gives you the most control over the theme. If you are importing HTML from an existing static site which is upgrade to WordPress without any changes, it might be the most appropriate approach.

Customize Child Theme

child themeThe child theme for WordPress contains all of the features and functionality that the parent theme has, and allows you to modify your website appearance without the need to change the theme files directly.

Whether you use a free theme or a paid one, it might be updated by its designers or developers in the future. Once this happens, all the changes you have made on the parent theme will be lost. However, you can avoid this embarrassment with a child theme.

To create a child theme, you can refer to this page.

Use Chrome Developer Tools

The Chrome DevTools is a great tool for customizing the CSS of your theme. With it, you can change the style easily and preview the effect promptly and visually. It is divided into 8 groups for different tasks in the toolbar. Here, you only need to use the Elements part.

Firstly, open the theme that you want to manipulate in Chrome browser. Then, right click any part of the theme, and choose the Inspect Element. Thus, you can see the window of developer tools just like the image showed in below. The left side presents all the HTMLs, and the right side presents the CSS style of each part.

DevTools

To target the part you want to make some changes, you can click on the related HTML, or select the item visually on the page. Then, you can focus on the right-hand style part to modify the theme directly.

One of the most important features of this tool is that you can see the instant effect after you modify the code, without the need to save the change. If you are not satisfied of your customization, you simply need to refresh the page to get rid of what you have done.

Note that all the changes are made on your browser but not the style sheet. This means you’ll not affect your readers who are viewing your site right now.

Then, copy the code changed by you to the child theme stylesheet file.

change stylesheet

Change Template Files

Generally, if you have selected a right theme for your site, there is no need to change the building blocks like header, footer, and sidebar. However, if it is needed, then you have to make use of the template files.

The codes of the most basic template files are showed as following.

template files

If you want more detailed information, simply check this page in WordPress.org.

Customize WordPress Themes using Theme Builder

The the manual process for theme customization may be complicated for newbies. Under this condition, we carefully choose some theme builders that allow you to create or customize your own themes without much hassle.

WP Theme Generator

http://www.wpthemegenerator.com/

customize wordpressWP Theme Generator is an online tool that enables users to create their exclusive themes. With this tool, you can create any type of themes, from colorful to minimal, personal to business. The tool comes with an easy-to-use interface to help users combine, add, or change any part of a theme such as slides, frames, colors, boxes, buttons, or shines.

Besides, it offers more than 50 fonts for users. You can change the fonts, color, as well as size with only one click on headings or normal context. However, this is not the end of all its features. With the framework, you can create unlimited layouts and sidebars, and then adding as many contents to them as you want.

If you run a business website, then, WP Theme Generator bound to be your best choice for it combines WooCommerce and functional shopping cart. Themes designed with the tool works well with WooCommerce, and once you have generated a theme, shopping cart will be automatically implemented. In this way, your business can be promoted largely.

WP Theme Generator

Artisteer

http://www.artisteer.com/

As an awesome web designer, Artisteer aims to change people with little-to-no coding knowledge into web design expertise within minutes. You can use the software to design an amazing template without knowing anything about CSS, Photoshop, or HTML. Moreover, Artisteer gives you choices to download, edit, and preview online website themes.

Artisteer

Lubith

http://www.lubith.com/

Lubith is one of the best theme generators in the cyber world. Till now, there are millions of webmasters have tried the tool, and 90% of them think highly of it. It achieves such good reputation because of two remarkable strengths: free and no code knowledge requirements. All people can use the tool for free; only need to create a Lubith account within minutes. Besides, no code knowledge requirement ensures everyone can create a unique theme, even for newbies.

Apart from those mentioned advantages, the tool also comes with an intuitive interface allowing customers to resize and move theme components by dragging. Users can also easily change any type and front settings, using a color picker to change backgrounds and colors, and many more. There is no need for you to worry about the browser compatibility issues for themes generated with Lubith are compatible with all major browsers.

Lubith

iThemes Builder

http://ithemes.com/purchase/builder-theme/

iThemes Builder strives to let users create an exclusive layout in an easy and quick manner. There is a layout editor with building blocks where you can insert modules like content area, sidebar, header, footer, a widget bar, as well as HTML areas. Besides, iTheme Builder is combined with the Style Manager Plugin that allows users to change website font, background, colors, and other features without knowing any code.

iThemes Builder

PageLines

http://www.pagelines.com/

The most eye-catching feature of the software is that it supports drag and drop system for creating WordPress themes. The technology ensures people to build professional templates in minutes. Besides, themes built with Pagelines are all fully responsive and SEO friendly.

The first feature makes the created theme looking good on any size of screens, and the second feature provides convenience for site owners to get a good ranking place in search engines. Apart from those necessary functions, PageLines also offers color control, live CSS, eCommerce, shortcodes, and so on so forth.

PageLines

Author

Joyce is a professional writer & SEOer who loves trying new things and sharing the experience through blogging. She loves clean design, playing with different WordPress themes, SEO, etc. Now she is very struggle with purchasing a bubbling apartment in downtown. You can help her by clicking our ADs or making a purchase via our links ;-)

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *