How to add content to a custom WordPress theme?

Carrying on from our previous post Create a custom theme. In this post we will add HTML content to the theme and provide the header, sidebar and footer content. Open the index.php file and write the following content.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champak Theme</title>
</head>
<body>
<div>
<h1>Header</h1>
</div>
<div>
<h1>Sidebar</h1>
</div>
<div>
<h1>Footer</h1>
</div>
</body>
</html>

We have created three divs in the theme. One for the header, the other for the sidebar and finally one for the footer.

Open the site by typing http://localhost/mytheme/ in the browser and see the result.

Finally, write

<?php get_header(); ?> Gets header information from the database and prints.
<?php get_sidebar(); ?>Gets the sidebar and prints it
<?php get_footer(); ?>Gets the footer and prints it.

at the appropriate places.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champak Theme</title>
</head>
<body>
<div>
<h1>Header</h1>
<?php get_header(); ?>
</div>
<div>
<h1>Sidebar</h1>
<?php get_sidebar(); ?>
</div>
<div>
<h1>Footer</h1>
<?php get_footer(); ?>
</div>
</body>
</html>

The page looks like this.

Let us place borders and backgrounds so that the respective contents can be distinguished.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champak Theme</title>
</head>
<body>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:yellow;">
<h1>Header</h1>
<?php get_header(); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:green;">
<h1>Sidebar</h1>
<?php get_sidebar(); ?>
</div>
<div style="border-width:10px;border-color:red;border-style:ridge;background-color:pink;">
<h1>Footer</h1>
<?php get_footer(); ?>
</div>
</body>
</html>

To be continued.

Leave a Reply