How to Create a Custom WordPress Theme from Scratch

How to Create a Custom WordPress Theme from Scratch

Building a WordPress theme used to be impossible without expensive developers or having coding knowledge yourself. But today, some WordPress plugins give you the ability to make your own custom theme using simple drag and drop functionality.


1. Installing WordPress Locally


First thing first, you need to install WordPress. Don’t worry it’s not rocket science to learn how to install WordPress. You can easily do that yourself.

2. Procedure to create a WordPress Theme From Scratch.

Manual – creating WordPress theme via coding

Automated – creating WordPress theme using a WordPress Theme Builder



Step 1: header.php

<html>

<head>

<title>Tutorial theme</title>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery.js'; ?>">

</script>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">

</script>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">

</script>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

<link rel="stylesheet" href="<?php abc('stylesheet_url'); ?>">

</head>

<body>


<div id="ttr_header" class="jumbotron">

<h1>HEADER</h1>

</div>

<div class="container">


<link rel="stylesheet" href="<?php abc('stylesheet_url'); ?>">


Step 2: index.php


<?php get_header(); ?>

<div id="main" class="row">

<div id="content" class="col-lg-8 col-sm-8 col-md-8 col-xs-12">

<div class="row">

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

<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">

<h1><?php the_title(); ?></h1>

<h4>Posted on <?php the_time('F jS, Y') ?></h4>

<p><?php the_content(__('(more...)')); ?></p>

</div>

<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>

</div>

</div>

<?php get_sidebar(); ?>

</div>


<?php get_footer(); ?>




Step 3: footer.php


<div id= "footer">

<h1>FOOTER</h1>

</div>

</div>

</body>

</html>

To view or add a comment, sign in

More articles by Sana Memon

Insights from the community

Others also viewed

Explore topics