This is a basic tutorial for newbies who want to create custom WordPress themes for blogs and websites. Creating a custom WordPress theme takes lots and lots of time. You need to know markup and programming languages like HTML, CSS, Javascript, and PHP.
Important Note: This is not a full tutorial on how to create custom WordPress themes. I have up to 9 years of experience in web design and WordPress. Creating a custom WordPress theme needs too much knowledge. Most of the theme design tutorial books contain outdated codes and teaching methods. So if you search Google, you end up with lots and lots of tutorials. You have to spend up to a whole 1-month period to learn custom theme design.
Here, I am trying to create one simple responsive WordPress theme with a sidebar. I also faced lots and lots of problems when I tried to create a custom theme. You can use a portion of the knowledge I acquire when creating a theme.
When I got lots and lots of frustration with customizing the Bulma CSS framework and finding out the WordPress theme structure, I found one of my friends had a super simple and attractive WordPress blog with up to 98- Google page speed score. he achieved this design customization and page speed score via the Astra Pro WordPress theme and WP Rocket plugin. I also get that page speed score and custom theme design via AstraPro. So my requirement to create a custom WordPress theme for my blog ended. But I keep updating this blog post whenever I have time to learn about custom WordPress theme design.
The difficulties I faced
At the very beginning stage, creating one custom WordPress theme takes up to a one-month time period. You can't do any other office work.
Nowadays, people have started to use block-based themes. So creating a classic WordPress theme is an outdated method.
Creating a custom WordPress responsive theme header is one of the most difficult tasks you will face in theme design
Bulma CSS navigation structure does not contain the <ul><li> method for menus. However, WordPress uses this method by default to create navigation menus.
2 Types of WordPress Themes
Classic WordPress Themes
Block-Based WordPress Themes (Nowadays its popular one)
How to Create a Custom WordPress Theme Using Bulma CSS
In this tutorial, I am using Bulma CSS to create custom WordPress themes. Bulma is a lightweight CSS framework. My plan is to create a simple WordPress theme for my blog. My main focus is getting 100/100 in the Google Page Speed test, better design to place Adsence Ads, and creating a lightweight theme based on small CSS and JS footprints. But I achieved this speed and optimization when I used premium WordPress theme builder frameworks like Astra Pro and GeneratePress with the WP Rocket plugin. Also, changing my SEO plugin from Yoast SEO to Rank Math SEO helped me achieve better search engine rankings.
First, download Bulma CSS files from the official site. Extract the zip folder.
We need a bulma.min.css file.
Then create a starter WordPress template using underscores.me (WordPress Generator)
Setup XAMP Server, Install WordPress and Create and edit WordPress Theme in VS Code
Note: Use a small and memorable theme slug.
Install XAMP Server software on your Windows PC. Download and install WordPress on your local system.
Then move the underscore WordPress to the them folder.
Open the theme folder in VS Code.
Create a folder named “css” in your theme file and add the “bulma.min.css” file.
Now we have to include our CSS file in the WordPress theme. To do that, open the “functions.php” file.
Find the Enque scripts and style section and add the following code inside “function underscoreslug_scripts() {“
First, remove the following styles from style.css:
ul {
list-style: disc;
}
Now open the header.php file and customize the default header code to your theme design
In order to create a custom theme header, you have to change the default navigation menu CSS based on your HTML theme classes.
Use the ‘menu_class' => ‘ ”, property in the wp_nav_menu function to add custom CSS classes. This class is applied to the ul tag. Reference: Wordpress.org – wp nav menu.
To insert the Home Page URL: <?php echo esc_url(home_url(‘/')); ?>
To Insert Blog name: <?php echo bloginfo(‘name'); ?>
To get the site description: <?php echo $iphonetopis_description; ?>
To add a search bar: <?php get_search_form(); ?>
You can't directly add custom CSS classes to the WordPress menu list or links. Use a WordPress snippet to add custom CSS classes to the li tag.
function _namespace_menu_item_class( $classes, $item ) {
$classes[] = "nav-item"; // you can add multiple classes here
return $classes;
}
add_filter( 'nav_menu_css_class' , '_namespace_menu_item_class' , 10, 2 );
Use a WordPress snippet to add custom CSS classes to a tag.
/* Add custom class to link in menu */
function _namespace_modify_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="navbar-item"', $ulclass);
}
add_filter('wp_nav_menu', '_namespace_modify_menuclass');
Use WordPress snippet to add custom CSS classes in the submenu
//Add custom CSS Classes to WordPress Sub Menu
class WP1_Sublevel_Walker extends Walker_Nav_Menu
{
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class='sm-container'><ul class='sub-menu'>\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul></div>\n";
}
}
Add “‘walker' => new WP1_Sublevel_Walker,” in wp_nav_menu() in header.php
I will keep updating this article as soon as possible when I learn new things in theme design.
FAQ?
How to Add a Favicon to Your WordPress Website
A favicon is a simple square image.
Common favicon Sizes – 16×16 pixels and 32×32 pixels. You can use 2 types of image formats for a favicon. PNG and ICO. The modern browser will support “.png” as a favicon. But old browsers do not support “.png” files as a favicon. So use the “.ico” file format for the website favicon. Use Favicon Generator to create favicons or use ICO Format Photoshop plugin.
So How to Add this Favicon to Your WordPress Blog or Website Upload the favicon file to your website or the blog installation directory. Go to Appearance -> Editor. Next, open the header.php file Add these lines inside the header.php file.
Note: If your header.php file already has these lines just replace the favicon path. <link rel=”icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon” /> <link rel=”shortcut icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon” />
Replace example.com with your website name.
How to Add Google Ads between WordPress Posts
Method 1: Use the Ad Inserter WordPress plugin. Method 2: Via Coding On your WordPress admin panel, go to Appearance -> Editor. Open the index.php or loop.php file. Search and find this code or similar code. <?php while (have_posts()) : the_post(); ?> Add the following code above the line: <?php $count = 1; ?> Next, find the code that looks like this: <?php endwhile; ?> Add the following code above the line: <?php if ($count == 1) : ?> YOUR GOOGLE ADSENSE CODE HERE <?php endif; $count++; ?> Replace the “YOUR GOOGLE ADSENSE CODE HERE” code with your ad code. If you want to appear your ad after some post, change the code like this Ex: after 4th post <?php if ($count == 4) : ?> YOUR GOOGLE ADSENSE CODE HERE <?php endif; $count++; ?>
How to remove the unwanted Yellow background in AdSense Ads
Change the CSS rules of ins in your theme style.css. ins { text-decoration: none; background: transparent; }
Remove Block-library/style.min.css from WordPress Frontend
Gutenberg is a new default editor in WordPress 5.0. It automatically adds or installs one or more special CSS files to manage blocks on the site’s front end. Add the following file to the theme function.php file to remove Block-library/style.min.css from the WordPress front end if you want(If you are using a classic WordPress editor. function webapptiv_remove_block_library_css() { wp_dequeue_style( ‘wp-block-library' ); } add_action( ‘wp_enqueue_scripts', ‘webapptiv_remove_block_library_css' );
How to Show WordPress Post View Count
( Display post views without plugin) Add this code to your theme function.php file function getPostViews($postID){ $count_key = ‘post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count==”){ delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, ‘0'); return “0 View”; } return $count.' Views'; } function setPostViews($postID) { $count_key = ‘post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count==”){ $count = 0; delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, ‘0'); }else{ $count++; update_post_meta($postID, $count_key, $count); } } // Remove issues with prefetching and adding extra views remove_action( ‘wp_head', ‘adjacent_posts_rel_link_wp_head', 10, 0); Next, you need to set up a post-view count. Just place this code below within the single.php inside the WordPress loop. <?php setPostViews(get_the_ID()); ?> If you want to display post views, add this code within the loop. <?php echo getPostViews(get_the_ID()); ?>
Another Way: Using the WordPress plugin Several WordPress plugins are available to show post views or counts. One of the plugins is WP-PostViews WordPress plugin Just configure this plugin via Admin -> Settings -> PostViews Find this line <?php while (have_posts()) : the_post(); ?> In your WordPress theme template file. Add this line after the above code to show the counter. <?php if(function_exists(‘the_views')) { the_views(); } ?>
Page/Post Template selection option not showing in WordPress Post Editor
You must specify the Template name in yourtemplate.php file <?php / Template Name Posts: Your template name here / ?> Custom Template selection option available in Pages -> Add New “Page Attributes” section in the right sidebar.
To add a post-template selection box and template, Create a file named “wpc-single-post.php” and add the following code: <?php /* * Template Name: Second Post Template * Template Post Type: post, page, product */ get_header(); ?>
WordPress Theme Design Software and Generators
Some Online applications offer WordPress theme design in online. These are called WordPress Theme generator software. Here I have listed the most famous and best WordPress theme generators list. Artisteer Artisteer is an automation software product used to design WordPress, Joomla, and Drupal themes. Artisteer also gives a basic template for the WordPress theme. In Artisteer, you can only customize header, menu’s, layout, footer, fonts, typography for your theme. So it’s not enough to design WordPress themes. But now this only one available to design WordPress themes using the software. Template Toaster Template Toaster is a very user-friendly WordPress theme generator. You can use drag and drop way to design WordPress themes in Template Toaster. It’s absolutely for beginners who did not know anything about coding. It also offers Magento, Joomla, and Drupal theme design. Template Toaster also has a forum to solve user problems about theme design. Lubith Lubith is another WordPress theme generator. It absolutely free one. It offers an online WordPress theme design. Lubith also has a well-running forum to solve user problems in theme design. Lubith generates WordPress themes compatible with major browsers.
WordPress Theme Design Frameworks
Most of the WordPress blogs running under frameworks based on WordPress themes. Many WordPress Frameworks offer Drag and Drop Layout builder. So users can easily navigate and design the WordPress theme. Ultimatum Ultimatum is the best WordPress framework or theme. If you use Ultimatum, you didn’t want to learn any coding to design a WordPress theme. Ultimatum has a powerful application builder to design layout, header, footer, and menus. Pagelines Pagelines is another one WordPress framework to design WordPress themes in Drag and Drop way. Pagelines also offer extensions to improve your theme. You can make all kinds of stuff such as shortcodes, sliders using these plugins. Pagelines is a very SEO friendly framework. So you do not need to afraid of any Search Engine optimization via theme. Headway Headway also provides drag and drop way to build a WordPress theme. It offers one design editor to customize these elements. If fully give support in HTML 5 and CSS 3. It’s an SEO friendly framework. Some WordPress themes offer to customize layout and design. They are iTheme Builder, Elegant Themes. These are a temporary solution to design WordPress themes. But if you learn WordPress themes design using coding (Php, Html 5, and CSS 3), everything very easy in WordPress theme design.
Top Frameworks to Create WordPress Theme Options Panel
WordPress Themes options page saves lots of time in Editing. Many premium themes offer different kinds of theme options page to customize and handle the WordPress theme. But if we need any specific functions and controls in our theme, we need to create our own theme options panel for our WordPress theme.
I am already listing some Frameworks to create WordPress themes. But they provide a default theme options panel. So I decided to list top frameworks to create a WordPress theme options panel. Slightly Modded Options framework (SMOF) Slightly Modded Options Framework produce modern looking theme options page to control all over WordPress theme functions. This Framework offers many features such as Drag and Drop slider, Background patterns, Media library uploader, etc. This is the best Framework for WordPress Theme developers. Upthemes Framework Upthemes Framework is a powerful lightweight theme options Framework that contains an extensible engine for SEO. This Framework offer options to control custom layouts, color schemes, header, and background images. It also supports multiple languages. Fluent Framework NHP theme options Framework is a simple and extendable theme option Framework. NHP Theme Options Framework offers many features such as extendable validation classes, build in field types, custom error and warning handling, custom tab sections, and import/export theme option settings. Options Framework theme Another Framework to create a WordPress theme options panel is the options Framework theme. This Framework easily integrates with any WordPress theme. This Framework offer options such as text, text area, check box, ratio buttons, multi check, typography, images instead of ratio buttons, and editor. My option panel My option panel Framework provides input fields, text area, select Dropdown, Wysiwyg editor, date picker, time picker, typography fileds, and Drag and Drop. It also offers import and export features. Redux Framework Redux is a simple extendable options Framework created based on NHP theme options Framework. This Framework also offers all over features such as multiple layout field types, WordPress settings API use, over-ridden fields using call back functions, custom validation error handling, Hook points for customization, import, and the export function, etc. Cheezcap Cheezcap is Another Framework to create a custom theme admin panel.
Some plugins also offer to create a WordPress theme options panel. They are the Options Framework Plugin and the OptionTree plugin. Options Framework – Options framework plugin is an easy way to build a WordPress theme options panel. It provides a complete tutorial to create and customize theme options. OptionTree – OptionTree is a theme options UI builder for WordPress. It offers a silky theme options layout. OptionTree plugin sponsored by ThemeForest (Largest WordPress theme market place on web).
How to use CSS sprites in WordPress post content
Most images attract users to read the post or content. Its also used to explain problems and solutions with step by step guide. If you running a blog based on technology, tutorial, and other topics, you need to add many images in your WordPress blog post. But many images in a single blog post, not good for Search Engine Optimization (SEO). These images will increase the HTTP requests and web page size. CSS Sprites CSS sprites are commonly used to reduce HTTP requests and page size. CSS sprites are the best way to reduce HTTP requests via WordPress post content images. Commonly CSS sprites only used in WordPress theme, not in post. So I decided to write a tutorial to use CSS sprites in WordPress post content. So How to use CSS sprites in WordPress post Content? Step 1: First you need to create a custom CSS panel for your WordPress theme. This custom CSS panel offers a simple way to put custom CSS about image sprite location. So we need to add a custom CSS option panel in the WordPress theme for a particular post. Let's get started. Go to your WordPress Admin Dashboard. Choose Appearance ->Editor option. In the Template menu, Open functions.php file. Just paste the following code.
//Custom CSS option panel add_action(‘admin_menu', ‘custom_css_hooks'); add_action(‘save_post', ‘save_custom_css'); add_action(‘wp_head','insert_custom_css'); function custom_css_hooks() { add_meta_box(‘custom_css', ‘Custom CSS', ‘custom_css_input', ‘post', ‘normal', ‘high'); add_meta_box(‘custom_css', ‘Custom CSS', ‘custom_css_input', ‘page', ‘normal', ‘high'); } function custom_css_input() { global $post; echo ‘ ‘; echo ”.get_post_meta($post->ID,'_custom_css',true).”; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST[‘custom_css_noncename'], ‘custom-css')) return $post_id; if (defined(‘DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST[‘custom_css']; update_post_meta($post_id, ‘_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo ”; endwhile; endif; rewind_posts(); } }
Step 2: Next create CSS sprites with a combination of images and its location in CSS. I am already written a post to create CSS sprites. Step 3: Add CSS sprite image in your blog post and paste CSS sprite image location CSS in the custom CSS panel. Step 4: Click the text option in your post content editor. Step 5: Now publish and check your post.
Arun Vasudev N is the writer & founder of Webapptiv. He writes content on different subjects including Web Design, Gadgets, and many others. His posts and stories appeared across websites since 2014.