CS Mumbai

Building on top of the previous post, let’s go ahead and add the famous “WordPress Loop” to the index.php of our theme. It’ll help to fetch and display blog posts on the site.

In the previous post, we had the following code in index.php –

<?php
    bloginfo('name');
    bloginfo('description');
?>

Let’s change that to –

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
 
<?php

while (have_posts()) {

	//fetches post, keeps track of count
	the_post();
	?> 
 
	<h2> <?php the_title(); ?> </h2>
	<p> <?php the_content(); ?> </p>

	<?php
}
?>

The code above fetches blog name and wraps it in h1 header. It also fetches blog description and wraps it in p paragraph tag.

Next, it goes into the while “loop”.

The while loop there checks have_posts() function. If it returns true, it’ll continue to execute everything inside of it.

Inside the while loop, we have the_post() function which fetches the post data and keeps track of the count. This allows us to use functions like the_title() and the_content() to output the title and content of the blog post.

It continues to do so as long as there are posts. This means changing our new theme’s index.php file to the code above will output all the blog posts on the site.

In the previous post, we created a simple WordPress theme. It doesn’t do much. It just displays “Hello WorldPress” on the site.

It can display anything we like. For example, it can print names. To do so, we’ll need to modify index.php and use the following code in it –

<?php
	function welcome($person) {
		return "Welcome $person";
	}
	echo welcome('Bob');
	echo welcome('Alice');
	echo welcome('Eve');
?>

The PHP function above, called welcome(), accepts a variable $person and returns “Welcome” followed the content of that variable (in this case, that’s the name of the person).

Thus, the line welcome('Bob'), will echo out “Welcome Bob” on screen.

Similarly, there are some WordPress functions which we can use to echo (or print) out the blog title and description. The code below does exactly that.

<?php
	bloginfo('name');
	bloginfo('description');
?>

That’s all in this short post! 🙂

In the previous post, we created a simple WordPress plugin. In this post, let’s create a simple Hello World WordPress theme that you can upload and install to your WordPress site.

Folder Structure

Let’s call our theme “Simple Hello World Theme” and let’s create a folder that will contain all our theme files. Let’s call this folder “shw-theme”.

We’ll also need three basic files to create our basic theme. Our folder structure would look like this –

/shw-theme
    /index.php
    /style.css
    /screenshot.png

index.php

<?php 
	echo 'Hello WorldPress'; 
?>

style.css

/*
Theme Name: Simple Hello World Theme
Author: Omkar Bhagat
Version: 1.0
*/

screenshot.png

The screenshot.png could be any image file that you’d like to use as your theme’s thumbnail image. The resolution of this image can be found in the official WordPress.org documentation. As of now the recommended image size is 1200px wide by 900px tall.

Zip It!

Next zip the folder and the theme is ready to upload. It does nothing special. It only prints out “Hello WorldPress”.