In WordPress we can add content by post or page. In a Newspaper or Blog
every single news is a post and pages like About, Contact. These are pages.
Behind the scene both are the same thing and they store in same database table. The difference is post type. Post’s post type is post and Page’s post type is page.
Well in your new WordPress theme create a file page.php in your theme’s root folder. Just like the index.php, add your header.php and footer.php in it.Now use this code where you want to show your page contents.
Now go to your WordPress admin, create a new page and add the page title and page content. Click on the Permalink and you will see the page content you added. So in this way you can add several pages as much your website required.
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.