Tag: theme-dev

WP: Register A New Menu Location

To register a menu location in our newly developed theme, we can include the following line in our functions.php file:

register_nav_menu('headerMenuLocation', 'Header Menu Location');

This again needs to be called on the action hook after_setup_theme (similar to the previous post where we added theme support for title).

Example:

function ob_theme_features() {
    register_nav_menu('headerMenuLocation', 'Header Menu Location');
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'ob_theme_features' );

Once this code is saved, we can see a “Menu” option under WP-Admin dashboard > Appearance page.

Trying to create a menu there will give us a prompt to select the menu location. We’ll be able to see a menu location that we just created (called “Header Menu Location” based on the code above).

Select that location and add some menu items like home page, blog page, etc.

Next we want to actually display this menu on the front-end. To do so, we’ll need to place the code below in one of the files responsible for outputting content on the front-end (e.g. index.php, single.php, etc).

We can put this in index.php to test it.

wp_nav_menu(array(
    'theme_location' => 'headerMenuLocation'
));

The result? You will start to see the menu you created by visiting the front page of your WordPress site.

You can read more about this by going to the official developer reference guide at WordPress.org 🙂

WP: Theme Support For Title

So far we’ve developed a theme that can load blog posts on the front page and allows us to open each post/article on it’s own independent perma(nent)-link.

But there’s one problem! We see the title of the page as a link as follows:

This can easily be fixed by adding theme support for title-tag using the add_theme_support WordPress function.

This function can be triggered on the action hook after_setup_theme as follows:

function ob_theme_features() {
	add_theme_support('title-tag');
}
add_action('after_setup_theme', 'ob_theme_features' );

Where does this code go? You must’ve guessed this already but if you’re new, it goes in functions.php file of our newly developed theme.

The result? We see a title instead of a link as follows:

Next, we’ll have a look at loading the WordPress admin bar in our theme.

WP: Header & Footer

In this post we’ll add a header and footer to the theme we created before. This can be done by creating header.php and footer.php files and then calling them by get_header() andget_footer() functions respectively.

Example: Let’s create a header.php file with the following content:

<p> This is header text </p>

And footer.php as follows:

<p> This is footer text </p>

Save both these files in the theme’s root folder (next to index.php). And finally edit index.php to include those “getter” functions as follows:

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

<?php get_header(); ?>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}

get_footer();

?>

If we load the site’s front page now, it’ll get us the following result:

Moving header and footer in separate files allows us to customise these files independently.

WP: Single.php

Disclaimer: The title of this post isn’t a “relationship status” 😉 It is instead a file that WordPress uses to display single posts on the site.

As seen before, the famous WordPress loop can be used in index.php to fetch and display all the posts on the site.

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <?php the_title(); ?> </h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}
?>

This loop gets us the following result on the front page of the site (when our theme is active):

Home Page (fetching posts via the famous WordPress loop)

This displays all the posts on the front page but we’d like to have an option to open each one separately.

To do so, let’s modify our code and wrap the title in a tag with href pointing to the_permalink() which fetches the permanent link of the respective post.

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}
?>

The result? Each post title becomes a link that allows us to open the post at a unique URL –

Home Page displaying all the posts (with their title as links)
The screen we see after opening one of the posts

Notice that the title is still a link. It doesn’t have to be, especially when we’ve already opened the post.

To fix this, let’s create another file called single.php in our theme’s folder and add the index.php code in there (without the permalink part).

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <?php the_title(); ?> </h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}
?>

Now when we open any post, its title won’t be a link.

Single Post (where title isn’t a link anymore)

What’s happening here? Previously index.php was taking care of all the pages on the site. Now index.php is only taking care of the front page while single.php is taking care of all the web pages that are “posts” on the site.

The same can be done for web pages that are “pages” on the site by using page.php file in the theme’s folder.

This allows us to customise home page, single posts and single pages separately while developing a WordPress theme.

WP: Shortcode To Display Page Template

Last two posts were about creating a WordPress shortcode and a WordPress page template, I’m going to mix these two and create a shortcode to display the page template I created in my previous post.

I’ve removed header and footer from the template code (taken from the previous posts) and edited the page-onedemo.php file as follows – 

<?php 
/*
Template Name: One Demo Template
*/
?>
 
<?php 	$myposts = get_posts();
		foreach ($myposts as $post): ?>
		<li><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php 	endforeach; ?>

And I’ve added the following code (for creating short-code) using my custom functions plugin (e.g. Code Snippets):

function echo_hello_func() {
   	get_template_part('page-onedemo'); 
}
 
add_shortcode('echo-hello', 'echo_hello_func');

This does the job but with a small problem which you can see in the screenshot below:

We need the shortcode content to display exactly where the shortcode is placed. At the moment, we’re seeing it above the existing content. To fix this, we’ll need to use output buffer –

function echo_hello_func() {
    ob_start();
    get_template_part('page-onedemo'); 
    return ob_get_clean();
}
 
add_shortcode('echo-hello', 'echo_hello_func');

Doing so helps us to display the shortcode content in the right place –

That’s all in this post. Thanks for reading! 🙂

WP: The Loop

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.

WP: Blog Title & Description

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! 🙂

WP: Hello World Theme

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”.