How to Make WordPress Theme from scratch (WordPress Theme Guide Step by Step)

WordPress is an open-source content management system that is widely used worldwide and has hundreds of themes. If you are a web developer, the day will come, you will want to prepare your own theme. Although there are many WordPress themes, it may be difficult for you to find a theme that will fully meet the look and functionality you need. Instead, it may be more tempting to create your own theme.

Even if you buy from Premium themes, that means buying dozens of features you don't use. Each feature also means extra load on the site. When you create your own theme, you get rid of all the unnecessary features found on a theme that you brought from the bliss of a theme you bought. The lack of this flexibility also allows your site to open faster and have higher ratings in speed tests.

If you can write an HTML website, you can easily use your site as a WordPress theme file with a few basic WordPress tutorials. The languages you need to know are mainly HTML and CSS. To make the site dynamic, you just need to have basic knowledge of PHP, even copy-and-paste.

How to Translate Static HTML Sites to WordPress?

Developing a theme in WordPress is not as complicated as you think. With the ease of use and numerous features of the WordPress content management system, everyone can create themes according to their needs. With Photoshop, you can translate a visualized website into an HTML site, and you can easily integrate HTML sites into WordPress system with this information you will learn.

Translating a static HTML website to WordPress becomes easier or harder, depending on your expertise in coding. If you ask me if you can write an HTML website, you can easily use your site as a WordPress theme file with a few basic WordPress tutorials. The languages you need to know are mainly HTML and CSS. To make the site dynamic, you need basic knowledge of PHP, even copy-and-paste.

How to Create a WordPress Theme Step By Step?

To run WordPress on your computer, you must first set up a local server. With XAMPP, WampServer or Laragon, you can install a local server on your computer with Apache and MySQL support and get the necessary infrastructure for WordPress to work.

Creating WordPress Theme from scratch by encoding?

To create a WordPress theme, you need to create a new folder in themes folder after installing a local server on your computer and installing WordPress. This folder will be your theme folder. You can give the name you want as the folder name. Next, inside the folder it is necessary to create files style.css, index.php, header.php, footer.php, which are also the main files of the WordPress theme.

By editing these four files, you can have a theme that you can activate and use from the WordPress admin panel. I use Visual Studio Code (VS Code) as a text editor. (Alternatively, you can use programs like Notepad++ or Sublime Text.)

style.css
The place where the information of your theme is kept is style.css. WordPress pulls information such as the name, version of your theme in the admin panel. So the first thing you need to do when you create the style.css file is to enter the theme information.

/*
Theme Name: Yukapo Theme
Theme URI: https://www.yukapo.com
Author: Yukapo Team
Author URI: https://www.yukapo.com
Description: Special theme for Yukapo
Version: 1.0
Text Domain: yukapo
*/

Although you do not enter this information, WordPress will detect the theme in the theme folder, but will not be visible because it cannot provide the above information at the points needed.

header.php
The page where you need to place the top of your HTML site with elements such as logo, navigation, menu, etc. The style files, head and title tags are located here, the body tag also opens here, but is not closed.

In order to automatically add WordPress's hook codes to the header.php page, code is added. Thus, when you install a plugin, the codes that must be added to the top of the page are added here by WordPress via this code.

> code is the code that allows automatic insertion of class names that WordPress specifically adds to pages.

footer.php
The file with the codes in the footer field of your page. body and html is the location of the closing tags. JS files that are loaded after the page is loaded are also put there.

What we need to add to footer.php is the code that we can use to place codes that need to be automatically placed in footer by WordPress. If you install a plugin and the plugin needs to add code to the footer of the page, it adds it via this code.

index.php
This is the file with the page contents. To import header and footer files, you can also open the page and at the end of the page we add codes. The codes that will be displayed in the page content are added between these two lines.

How to Install WordPress Theme after these edits have been made page to perform the installation process. In the Admin panel, the theme you installed will appear under View > Themes.

front-page.php
The front-page.php file is the page with the codes on the home page of your WordPress. The codes you add here will only appear on your site's homepage.

page.php
The themes of the pages in your WordPress site, where static pages appear, such as the contact page, about me page, are edited through the page.php page.

After making all these edits, let's create a new page from the admin panel and make the page content appear on the site. The code we need to use to display the page title and content on a page are as follows.

<h2><?php the_title(); ?> // Page Header
<p>
     <?php if (have_posts()) : while (have_posts()) : the_post() ?>
         <?php the_content(); ?> // Page Content
     <?php endwhile; endif; ?>
</p>

archive.php
The pages that list the content on the blog pages are edited through archive.php. We can get codes in Page.php as it is, but we need to make some adjustments. Such as providing links to the details pages of blogs from archive.php and displaying a summary instead of the entire content on list pages.

View the category name: <?php single_cat_title ();?>
Content summary: <?php the_excerpt ();?>
Read more link: <a href=”<?php the_permalink ();?>Read More

single.php
Blog posts are pages after clicking on the Read More link. The theme of these pages where the original content of the text is displayed is edited through single.php. Their code again shows similarity with page.php. On the blog detail page, if you want to view the categories to which the posts are linked, we use the following code.

<?php
$categories = get_the_categories();
foreach($categories as $cat): ?>
    <?php echo $cat->name; ?>
<?php endforeach; ?>
<?php
$categories = get_the_categories();
foreach($categories as $cat): ?>
    <a href="<?php echo get_category_link($cat->term_id); ?>">
        <?php echo $cat->name; ?>
    </a>
<?php endforeach; ?>

If you want to add a comment field at the end of blog posts code. Even this code is enough to meet all the commenting requirements in WordPress.

functions.php
When preparing a theme with WordPress, there are various codes related to the configuration of your WordPress theme, and the page on which it is edited is the functions.php page. For example, if you need to add style files or script files between the head tags of your page, we analyze this through functions.php.

To create the functions.php file, <?with php we open the php code, but we do not turn it off. Then we do what we want to do.

We need to load CSS files or JS files between head tags via functions.php. This is how we do it.

<?php
function load_stylesheets()
{
    wp_register_style('stylesheet', get_template_directory_uri() . '/style.css', array(), false, 'all');
    wp_enqueue_style('stylesheet');
}
add_action('wp_enqueue_scripts','load_stylesheets');

function load_scripts()
{
    wp_register_script('customjs', get_template_directory_uri() . '/includes/scripts.js', '', 1, true);
    wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts','load_scripts');

Create Menu in WordPress

We are still using functions.php to activate many features of your site. For example, we use the following codes to activate navigation menus and name each one.

add_theme_support('menus');
register_nav_menus(
    array(
        'top-menu' => __('Top Menu', 'theme'),
        'footer-menu' => __('Footer Menu', 'theme'),
    )
);
<?php wp_nav_menu (
array(
    'theme_location' => 'top-menu',
    'menu_class' => 'navigation' // Menüye sınıf tanımlar.
)) ?>

If you want an image of your theme to appear in the form of a logo or a preview of your website, save it as a file named screenshot.png in your theme folder.

How to Develop Yourself about Developing WordPress Theme?

WordPress is a content management system with many features as easy as it is. It is not very possible to fit all the features into one lesson. That's why you need to study how other themes are written, and you need to do research online for solutions that you may need when preparing a theme. As it is a widely used system, you will surely get the solution quickly.

0/5 (0 Reviews)