The code through which will pass WordPress to display each Post.
The loop, or its original name "The Loop" is the core of WordPress. This is a simple PHP WordPress loop through which will pass to display each Post. Since WordPress 3, this loop is generally defined separately in a loop.php file. This is not mandatory but practical.
Here is a diagram of the home page, with includes and the loop:
The header, sidebar and footer will be displayed only once.
For cons, the content of the loop will appear as many times as there Posts to display:
1 only if you have just one
8 if you have 8
10 if you have 10
10 if you have 17 ...
Indeed, the home page displays a number of maximum loop Posts. This number is 10 by default, but can be set in the WordPress admin (Settings -> Reading -> The site's pages must have at most).
Thus, from the 11th post to display, WordPress will display a basic pagination (Previous / Next), provided of course that we may do in our code!
Single.php and page.php templates are special because they show that a Post / Page anyway. This is quite normal: these are templates for displaying the page dedicated to the Post / Page to.
The loop is used not only for Posts but also for Pages. But given that a general list Blog Posts several but not many pages, the rest of this lesson will focus on the Posts. But it must be remembered that it is possible to use the following functions with Pages also (if the context is prompt).
The structure of a loop
We can divide a loop into 3 parts:
.if
If there are Posts, done that.
.while
Each Post, done that.
.else
If there is no post to display, done that.
The "else" part is often overlooked because the home page, categories or archives dated Posts almost always have to show. We do not bother to handle the case where there would not be.
By cons, it is practical (or even necessary) to use an "else" in the template search.php to display something even when there is no result.
<?php if (have_posts()) : ?>
<!-- if i have Posts, I view this part -->
<?php while (have_posts()) : the_post(); ?>
<!-- For every Post, I view it -->
<?php endwhile; ?>
<?php else : ?>
<!-- If there are no Post, I view this part -->
<?php endif; ?>
The have_posts () function checks if there are post to display and returns either true or false.
The real loop, the part between while and endwhile: the code that will be used as many times as there Posts to display. This is where we will put the functions related to the content of each Post: title, description, link, categories ...
The else part is displayed when there is no post to display (for example, if a search returns no results or if a category is empty).
The endif is essential, otherwise the sky will fall on your head.
The content of the while loop
We saw in Lesson 2 is a Post could contain: a title, a summary, a description, category (ies), the keyword(s) ...
We will translate it in PHP functions.
| contents | FUNCTION PHP |
|---|---|
| Title | the_title() |
| unique identifier | the_ID() |
| executive summary | the_excerpt() |
| description | the_content() |
| Latest Picture | the_thumbnail() |
| category (ies) | the_category() |
| keyword(s) | the_tags() |
| publication date | the_date()or the_time() |
| permalink | the_permalink() |
These functions are to place in the while loop. This is very important!
It is illogical to call the identifier in the header of the site because the ID does not belong to the site but one of the Post.
These are the main functions that you use but there are many others.
Fulfilling our code with these features:
<?php if (have_posts()) : ?>
<p class="title">
Hey ! there is Posts !
</p>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h3 class="post-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a>
</h3>
<p class="post-info"> Post it <?php the_date(); ?> dans <?php the_category(', '); ?> par <?php the_author(); ?>.
</p>
<div class="post-content">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<p class="nothing">
There are no post to display!
</p>
<?php endif; ?>
The code is pretty self explanatory. The PHP functions are added all the while loop. You are free to edit the HTML or PHP code to add functionality, to remove, to edit.
What could be simpler?
Varied generated code
Care must be taken to the HTML code that each function generates because it is different depending on the features.
For example:
.The_title () and the_ID () return plain text
.The_content () returns (much) HTML
.The_thumbnail () returns an <img>
.The_category () returns <a> in <li> (without the <ul>)
.The_tags () returns a sequence of <a>
settings
The vast majority of these functions take parameters, some of them even being required.
They are commonly used to edit the HTML code they generate.
For example, the_thumbnail () takes as a parameter the size of the picture on the front:
thumbnail (miniature)
medium (average)
wide (large)
original (original size)
These dimensions are also those in which all the images are uploaded via WordPress resized. They can be configured in Settings -> Media.
The list of parameters, it's really a case by case basis. We must refer to the documentation to find out what are the available parameters and their associated values.
4 includes = 1 template
Now that we have defined the most important includes (header, loop, sidebar and footer) and utilize them in one template index.php.
<?php
get_header();
get_template_part('loop');
get_sidebar();
get_footer();
?>
Damn, what brevity!
But all in all, we have written so many HTML and PHP in the includes, that by combining, index.php no longer need to add!
Look at the complete HTML generated code, and give colors to see what it has generated what part include:
header.php
loop.php
sidebar.php
footer.php
<!DOCTYPE html>
<html>
<head dir="ltr" lang="en-US">
<meta charset="UTF-8">
<title>Hello world!</title>
<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/bbxtutorial/style.css" type="text/css">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Tutoriel WordPress' href='http://localhost/wordpress' /> <meta name="generator" content="WordPress 3.2.1" />
</head>
<body>
<div class="wrap">
<header>
<h1><a>Tutoriel WordPress</a></h1>
<h2>Just another WordPress site</h2>
</header>
<p class="title"> Hey ! There are Posts ! </p>
<div class="post">
<h3 class="post-title">
<a href="http://localhost/wordpress/?p=1">Hello world!</a>
</h3>
<p class="post-info">
Posted on January 6, 2015 in <a href="http://localhost/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> par bbx. </p>
<div class="post-content">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
</div>
<div class="side">
<!-- Bouton RSS -->
<a href="http://localhost/wordpress/?feed=rss2">Subscribe to RSS</a>
<!-- Search Form-->
<form method="get" id="form" action="http://localhost/wordpress/">
<input type="text" value="" name="s" id="s">
<input type="submit" id="submit">
</form>
<!-- Archives -->
<ul class="list">
<li>
<a href='http://localhost/wordpress/?m=201111' title='January 2015'>Junuary 2015</a>
</li>
</ul>
</div>
<footer>
WordPress Tutorial is powered by
<a href="http://wordpress.org">WordPress</a>.
</footer> <
/div>
</body>
</html>
Your site may well be satisfied with these 5 includes (remember searchform.php is called in sidebar.php) and the template index.php, which is, remember, the default template. So if you are viewing a category, it will be used. If you view a page dedicated to a Post or Page, it will be used.
Do not worry about the number of displayed Posts, WordPress will display one for the dedicated page and up to 10 for others.
The downside, you will agree, is that each page on your site will be almost identical. Its structure will be anyway. A header, tickets, a sidebar, a footer. No other content to specify, for example the name of the category in which you are, or the name of the month in which you are currently browsing the archives, or view the comments ticket!
The advantage of having made includes lies in being able to call these functions multiple times, in different templates. If we limit ourselves to one template index.php, why have bothered to make includes from the start?
Differentiation templates
We will begin to create other templates by adding their code of their own. For example, on a category page, we will add the name of that category.
Taking the code of index.php t on the changes to create category.php:
<?php get_header(); ?><div class="main"><h1>Catégoy : <?php single_cat_title(); ?></h1><?php get_template_part('loop'); ?></div><?php get_sidebar(); ?><?php get_footer(); ?>
So you have the header, the "hand" part the sidebar and footer. I added PHP tags for readability.
The difference:
a "hand" div that can serve as main column
the single_cat_title () function that displays the name of the category in which it is
To test this template, click on the "Uncategorized"
that was generated in the loop by the_category () function. You come across a url blog.Net-Explain/?cat=1 kind or blog.Net-Explain/category/uncategorized if you enabled the pretty permalinks (Settings -> Permalinks). You will see the title of the category appear after the header but before the loop. You can do the same for the other templates (search.php, tag.php, date.php ...). Here are some ideas: change the "Category" title by something more appropriate display or not the sidebar classee to add a div "hand" to differentiate his style as templates Single.php template, since it corresponds to the page dedicated to a Post, generally entitled to preferential treatment. This is what we will see in the next lesson.
Previous:Lesson 5: The includes wordpress
.jpg)
.jpg)
0 comments