WordPress Theme Development Part 8 – The Loop

Loop is a php code that display WordPress Posts. Posts is a single article. In a newspaper website we read a single news. That is a post. In WordPress dashboard you can see Posts option under the Dashboard menu. You can Add new post with post categories.

In my Travel theme I want a Travel Blog. Several category of travel posts will be there. So I will add Categories then add posts of that categories. Now If I want to display these posts in my theme then I have to use WordPress loop.

The Loop

Loop starts with this code.


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

and ends with


<?php endwhile; ?>
<?php endif; ?>

This code check if there is any posts already in WordPress then run a While loop. In between this loop we can display our Post Title, Post Content , Date, Post link and many more. Here is some example of items that you can show by post loop.


<?php the_title(); ?>
<?php the_content(); ?>
<?php the_permalink(); ?>
<?php the_content(); ?>
<?php the_time( 'F jS, Y' ); ?>
<?php the_category( ', ' ); ?>
<?php the_author_posts_link(); ?>

Custom Post Loop

We will discuss more about Custom Post later but for now just some idea about how to use loop on it. Custom Post Type is same as WordPress post with different type content. Internally custom post store in a same place in database. Here is a sample loop that you can use for looping custom post.


<?php $query = new WP_Query( 'post_type=travel' ); ?>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

<?php endwhile; ?>
<?php endif; ?>

Thanks for reading !

 

WordPress Theme Development Part 7 – Enqueue Scripts and Styles

WordPress developers run WordPress themes and several plugins in a same place. So there are chances to conflict with styles or scripts. WordPress have Enqueue system for solve this problem and adding CSS and Js files perfectly.

Here is sample of Enqueueing files. Add this code to your functions.php.


function travel_enqueue_files() {
	
	wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css' );

	wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/js/owl.carousel.js', array( 'jquery' ) );
	wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/js/website-scripts.js', array( 'owl-carousel', 'jquery' ), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'travel_enqueue_files' );

wp_enqueue_style() functions uses for adding styles file and wp_enqueue_script() for adding scripts. get_template_directory_uri() function brings the folder location for each file.

I’m adding all these enqueue script and style files into an action hook ‘wp_enqueue_scripts’. 

Important thing

Enqueue system only run if you added wp_head() and wp_footer() functions in your header and footer file. Please check Part 5 for how to add these functions properly.

After added your styles and scripts file refresh your website and check if everything working fine. If you face any problem then press Ctrl + U and check is there any mistakes on file names or file paths.

Display All Images

If you enqueue done then you can see all the CSS and Js working fine but still one thing remaining from your HTML template. That is images.
For linking all your images use this function get_template_directory_uri()

Here is a sample how it works


<img src="<?php echo get_template_directory_uri(); ?>/images/travel.jpg" alt=""/>

Hope everything looks like your original HTML file. Thanks !!

WordPress Theme Development Part 6 – functions.php

functions.php or theme functions file is the backbone of a WordPress theme. In this file we can add WordPress hooks, enqueue stylesheets, custom posts and lots of important work we can do here.

In our themes root folder I’m creating a new file functions.php 

This file start with <?php and don’t need php closing tag here. Add this code to your functions.php

<?php
// Theme Functions File

// Theme Setup File
function travel_theme_setup() {
   /* Add filters, actions, and theme-supported features. */
}

add_action( 'after_setup_theme', 'travel_theme_setup' );

I added an action hook after_setup_theme. In between this hook function travel_theme_setup we can add Filters, Actions and other theme-supported file.

WordPress Theme Development Part 5 – Index, Header & Footer

Take a look on your index.php file. All the static html codes there and we will make them dynamic. So first of all we have to divide this file into 3 section. index.php, header.php and footer.php. Also if you have any sidebars then also create sidebar.php for that.

Here is the current situation of my themes root folder.

Some Important Task

  • In your header.php use this function into the title tag.

<?php bloginfo('title'); ?>

It will show your site title that you set at the installation time. If you want to change the title then go to your admin panel then change the Site Title on  Settings->General page.

  • In header.php just before the closing head tag </head> use this function.

<?php wp_head(); ?>

and in your footer.php just before the closing body tag </body> use this function.


<?php wp_footer(); ?>

Now if you refresh your website you will see the WordPress admin bar shows on the top of the website. It will only show when you logged-in in your WordPress. Looks good yeah ??

Well, these 2 function will do lots of work for us later.

WordPress Theme Development Part 4 – Screenshot

In WordPress admin when we go to Appearance->Themes we see all the current themes with their images. You can simply add a PNG image on your themes root folder and name it screenshot.png.  It will work perfectly on Appearance->Themes.

I added a png image in my themes root folder.

And its works fine on admin themes page.

 

Now you can Activate this theme and refresh your website. It will show everything from index.html page without any CSS and JS.

So we are confirmed that our theme is working fine in WordPress. Now we need to add all CSS styles and JS scripts to show it perfectly.

Thanks !