In this tutorial, You will learn How to Create a Custom WordPress Theme. When you’re starting developing with WordPress, you might find yourself browsing through so many tutorials.
Starting the Custom WordPress Theme
When starting a theme, first you need to create a directory for your theme inside wp-content/themes folder. When you’re done with that, you also need to create two required files index.php and style.css
The style sheet is the defining file of the theme for WordPress.
/* Theme Name: Webecoms Sample Theme URI: https://webecoms.com/ Description: All About How to Learn Web Design & Development Author: Prince Santoki Author URI: https://webecoms.com/ Version: 1.0 */
The code above is all contained in a comment, so it won’t affect the style definitions. Now I filled it out with a few details, these will be used by WordPress to display the details of the theme to admins. Make sure you add it to the top of the file with no white-spaces before it.
So, what goes inside the index.php? Just think of everything you would put in a simple HTML file when starting a website. You can do that also there but be sure to include functions wp_head() and wp_footer()
Need Displaying Posts inside the Index.php
For displaying posts you will need to use The Loop. That is the most important thing when you’re developing a custom WordPress theme since that is how you will show the content.
<?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> You content Come here... <?php endwhile; ?> <?php endif; ?> <?php get_footer(); ?>
Create Header and Footer files
We will have to use more than just one file index.php. When creating such templates, we don’t want to copy and paste the footer and header code for each template. What if the header changes? We would need to copy and paste it again.
We can help ourselves by separating the header and the footer into separate templates header.php and footer.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebEcoms</title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>>
<?php wp_footer(); ?> </body> </html>
So now we are done with creating the required files for our custom theme. Now to see the changes we need to activate our theme. For that login to your wordpress admin and go to Appearance > Themes over there you find our theme Webecoms Sample.
Now, Click on the Active button to activate our custom theme.
That’s it. Now if you go to your WordPress homepage you will see content from index.php file.
We hope this article about How to Create a Custom WordPress Theme is helpful. If you have any questions about the article feel free to comment below. We will get back to you with an answer.
You may also like this,