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.
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.
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; ?>
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.
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’.
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()
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.
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.