Custom WordPress Theme

How can we create a custom WordPress theme easily?

Introduction

WordPress Themes is a collection of template files written in PHP, HTML, CSS, and JavaScript. We need to have a good understanding of all of these web design languages to create a custom WordPress theme. Using the new WordPress theme generators anyone can create their own customized WordPress theme within an hour without any coding knowledge. There are also WordPress page builder plugins that help you create custom page layouts using the drag and drop interface, but this is limited to layouts only; We cannot create custom themes.

This is until Beaver Builder decides to resolve this issue with their Beaver Theme. This is one of the best WordPress page builder plugins. We need to install and activate Beaver Builder and Beaver Theme plugins. We can find many themes in the WordPress.org theme directory. Some of the best WordPress themes are listed below

Astra – This is a free lightweight all-purpose WordPress theme that comes with built-in support for Beaver Builder.

OceanWP – This is a popular free multipurpose WordPress theme that comes with full-page builder support.

StudioPress themes – All of their themes are compatible with Beaver Builder and work well with Beaver Theme. Use this link to set up your layout Setting up Your Theme for Beaver Themer

Requirements to Create a WordPress Theme

1. Installing WordPress

The first thing we have to process with installing WordPress. It can be easily done by yourself. Second thing is to decide the layout of the theme.

2. Create a WordPress Theme either by Manual or Automated

Manual – creating WordPress theme via coding

Automated – creating a WordPress theme using a WordPress Theme Builder

Creates your custom theme ( without the use of plug-ins, widgets, or anyone else’s theme)

In discovery, follow the path of wp-content> themes to come to your themes folder. WordPress default themes – twentyfifteen, twentyeighteen, twentythirteen – and index.php. Create a new directory for your theme; I called it my startup WordPress.

Only two files are required to be a WordPress theme – style.css and index.php.

create style.css in your custom theme folder. It contains a comment that warns WordPress that there is a theme here. Change the name, author, description, and more.

style.css

Theme Name: Start WordPress

Author: Tania Rascia

Description: Bootstrap Blog template converted to WordPress

Version: 0.0.1

Tags: bootstrap

Remind Bootstrap blog source code, Move those two files – index.html and blog.css – to your custom theme folder. Rename Index.html to index.php.

Your theme is now created. Go to the WordPress Dashboard and click on Appearance> Themes. You will find all the default themes in the collection. Activate the theme and go to your main URL. Yes, it is very simple. You have already created a custom theme. One thing you may notice – blog.css is not loaded but bootstrap’s core CSS and JS files are loaded via CDN.

Note: Chrome will no longer allow .dev local URLs.

Fortunately, this can be easily fixed. There are some ways to do this, but I will show you the simplest way to get started.

Find the place where you linked to the CSS stylesheet in the index of index.php It seems like it right now, but we need to change that.

We have to say it in such a way that the themes change with the folder. Replace the code above with the code below.

If you reload the page, you will see that CSS is now loaded. If it does not load, please make a hard update. This concept is the same for images, javascript, and other files in the Themes folder, except for PHP files.

If you are unable to load CSS successfully, click “View Source” and find the path to your CSS file in the code. It should be startwordpress.dev/wp-content/themes/startwordpress/blog.css. Make sure Blog.css is stored in the right place.

Keep in mind that this is not the right way to load scripts on your site. It’s easy to understand and it works, so let’s do it now.

Dividing of pages into sections

Now, everything is in index.php. But we want the title, footer, and sidebar to be the same on all pages. We are going to divide index.php into four sections namely header.php, footer.php, sidebar.php, and content.php. The original index.php is here. Now we start to cut and paste.

<! Everything from DOCTYPE html> to the main blog title is in the title file. The title usually contains all the necessary head styles and navigation over the website. The only addition I make to the code is <? Php wp_head (); ?> Before closing </head>.

header.php

<!DOCTYPE html>

<head>

<title>Blog Template for Bootstrap</title>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>

<!–[if lt IE 9]>

<![endif]–>

<?php wp_head();?>

</head>

<body>

<a class=”blog-nav-item” href=”#”>New features</a>

<a class=”blog-nav-item” href=”#”>Press</a>

<a class=”blog-nav-item” href=”#”>New hires</a>

<a class=”blog-nav-item” href=”#”>About</a>

</nav>

</div>

<h1 class=”blog-title”>The Bootstrap Blog</h1>

<p class=”lead blog-description”>The official example template of creating a blog with Bootstrap.</p>

</div>

The title to the footer is the same deal. Any footnotes you have, your JS links (for now) and <? Php wp_footer (); ?> Perfect front </body>. Since I added the .container div to the title, I’m going to close it in the footer.

footer.php

</div> <!– /.container –>

<p>Blog template built for <a href=”http://getbootstrap.com”>Bootstrap</a> by <a href=”https://twitter.com/mdo”>@mdo</a>.</p>

<p>

</p>

</footer>

<?php wp_footer(); ?>

</body>

</html>

Most websites, especially blogs, archives, tags, category, ads, and whatnot contain a page for adding content. (Content removed for summary.)

Sidebar.php

<h4>About</h4>

<p>

Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur

purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

</p>

</div>

<h4>Archives</h4>

<li><a href=”#”>March 2014</a></li>

<!– More archive examples –>

</ol>

</div>

<h4>Elsewhere</h4>

<li><a href=”#”>GitHub</a></li>

<li><a href=”#”>Twitter</a></li>

<li><a href=”#”>Facebook</a></li>

</ol>

</div>

<!– /.blog-sidebar –>

If there is a sidebar where all the secondary information goes, then all the articles and important content of the website is available content.

content.php

<h2 class=”blog-post-title”>Sample blog post</h2>

<p class=”blog-post-meta”>January 1, 2014 by <a href=”#”>Mark</a></p>

<p>

This blog post shows a few different types of content that are supported and styled with

Bootstrap. Basic typography, images, and code are all supported.

</p>

<hr />

<!– the rest of the content –>

</div>

<!– /.blog-post –>

Index

The index file should now be much smaller. In fact, it should be:

<!– /.blog-main –>

</div>

<!– /.row –>

Now we are going to add everything again. Here is your new index.php.

index.php

<?php get_header(); ?>

<?php get_template_part( ‘content’, get_post_format() ); ?>

</div> <!– /.blog-main –>

<?php get_sidebar(); ?>

</div> <!– /.row –>

<?php get_footer(); ?>

Even if you have never used PHP before, this code is all self-explanatory. get_header () ;, get_sidebar (); And get_footer (); All functions for searching for the respective .php files and inserting the code. Sure, they all have their own <? Php?> Go to the tags and tell the server to parse them into HTML. The content function is a bit different, but it does the same thing.

If you re-load your URL, your entire site is loaded as before. If you log in at the back end you will see the top bar.

Primary settings

Before you can start dragging posts and pages, you need to configure some key settings in WordPress. For example, my title is now “Bootstrap Blog”, which is hardcoded in HTML. I want the <title> and <h1> back-end of my site to be editable.

On your dashboard, go to Settings> General. Set your title.

In Header.php, convert the contents of the title tag and the main h1 tag to this code:

<? php echo get_bloginfo (‘name’); ?>

This is an explanation.

<? php echo get_bloginfo (‘description’); ?>

Finally, the title always wants to take me to the main blog page. bloginfo (‘wpurl’); The code that makes it.

If you are confused the full code is here.

</div>

We have finally made the first dynamic change to the page. The front end should reflect what you have in your settings. Now go to Settings> Permalin. By default, WordPress is set today and name, which is a very ugly URL system. Click on the post name and apply the changes.

The Loop

The most exciting part is being able to dynamically insert content, and we do that through The Loop in WordPress. This is the most important function of WordPress. All your content is created by a single loop.

In the dashboard, if you click on the post, “Hello, world!” Post there by default. Our goal is to show that post on the blog.

The loop is very simple.

<? php if (have_posts ()): when (have_posts ()): the_post (); ?>

<! – Contents of the ring ->

<? php end; endif; ?>

This explains itself – if there are posts, when there are posts, show the post. Anything within the ring will be repeated. For a blog, this is the post title, date, content, and comments. The loop ends where each individual post ends. We are going to add a loop in index.php.

Your new index file is here.

index.php

<? php get_header (); ?>

<? php

if (have_posts ()): when (have_posts ()): the_post ();

get_template_part (‘Content’, get_post_format ());

In the meantime; endif;

</div> <! – /.blog-main ->

<? php get_sidebar (); ?>

</div> <! – /.row ->

<? php get_footer (); ?>

The only thing inside your ring is content.php, which contains the contents of a single post. So open content.php and change the contents to:

<p class = “blog-post-meta”> <? php the_date (); ?> Issued by <a href=”#”> <? php the_author (); ?> </a> </p>

<? php the_content (); ?>

</div> <! – /.blog-post ->

Title (); The title of the blog post, the_date (); Shows the date, the_author (); Author, and the_content (); The content of your post. I added another post to prove it works in the ring.

Let’s make the sidebar dynamic. The sidebar should have a description and archive list. On the dashboard, I’m going to edit my user description to say “front end web developer and professional nerd”.

Remove all <li>s under archives and convert them to this code.

sidebar.php

<h4>Archives</h4>

<?php wp_get_archives( ‘type=monthly’ ); ?>

</ol>

For my explanation, I am going to pull metadata from my user account.

<h4>About</h4>

Now this content is being pulled into dynamics as well.

Menu and pages

We know how to create a blog and edit some sidebar content. There is only one important aspect of this page – the navigation and where it goes. Well, WordPress has two main features – Posts and Pages. They are both very similar in their use of the loop. However, pages, where you post content that is not a blog post, are pages. This is where WordPress’s CMS feature comes in – you can customize each page as much as you want.

In the dashboard, I have added one page so I can see two. First, we are going to edit the navbar so that the links lead to the pages. Go back to header.php and find and replace this code.

header.php

<?php wp_list_pages( ‘&title_li=’ ); ?>

</nav>

</div>

wp_list_pages (); The unlisted list will list all the pages you have. ‘title_li =’ The code tells you not to add the title “Pages” before the list. Unfortunately for us this is terrible; The original blog.css contains links encoded in a tag, not li tags.

Fortunately, this is a very easy solution. I am going to use styles from one to another. Add this to blog.css

blog.css

.blog-nav li {

Status: relative;

Display: inline-volume;

Dump: 10px;

Font weight: 500;

}

.blog-nav li a {

Color: #fff;

}

Now it should be displayed correctly. However, if CSS does not apply, please find the source of your HTML output and find out the URL of your CSS. It should be startwordpress.dev/wp-content/themes/startwordpress/blog.css. Be sure to do even better

Pages

Think of index.php as a blog-code and page.php as a page-code. I’m going to create page.php, which will be very similar to the code except for the 8-width content and the full 12-width grid instead of the 4-width sidebar.

page.php

<? php get_header (); ?>

<? php

if (have_posts ()): when (have_posts ()): the_post ();

get_template_part (‘Content’, get_post_format ());

In the meantime; endif;

</div> <! – /.col ->

</div> <! – /.row ->

<? php get_footer (); ?>

When I click on my sample page, the layout is now different from the blog post layout.

Conclusion:

There is still a lot to learn about WordPress. Now you know how to turn any website into a WordPress theme – without the use of plug-ins, widgets, or anyone else’s theme.

Vivek

Leave a Reply Cancel reply

Vivek

Leave a Reply Cancel reply

How to integrate stripe payment gateway in WordPress?

Best 10 free WordPress themes – 2022

Best WordPress Hosting in 2022

How to Optimize WordPress website content? – Extended

How to Create Custom WordPress Theme?

How to Add Email Subscriptions to Your WordPress Blog