Use the WordPress loop to specify different styles for the first post.

If you can edit the WordPress loop, you can control the design and content of the WordPress site. I often edit standard loops and sometimes use wp_query to create completely new loops and create custom loops. But in some cases, I want to go further. I want the first post in the loop to be different from subsequent posts. This may be because you want to add a custom style or display something else. For example, you might want to display the content of the first post and only show excerpts from subsequent posts. Alternatively, you might want to use different sizes of recommended images, or apply different CSS classes to the first post. The
This highlights recent posts, draws attention, and encourages visitors to read or click. You can also create more designs by improving the layout of your site. This post will show you how to execute using the wp_query class. We’ll show you how to use wp_query to set up custom queries for all posts, and how to create a second query that applies only to the first post. In the example produced, we will demonstrate how to run two separate queries using wp_query and perform this operation in a custom page template. We will then show you how to apply this technique to the standard loop, edit the standard archive template, and change the standard loop using pre\u get\u posts. The
Note: if you are not familiar with wp_query and its powerful functions, please check the in-depth guide to wp_query conquest. If necessary, you can imitate the post. Development and installation of WordPress – do not try on the site before running! Start the code editor: in query creation, my personal site has a custom page template for my \
Loops can be very different. You can use regular posts, archive template files, custom post type template files, or anything you don’t want to use. Therefore, you do not have to use a custom page template to use this technique. By focusing on the loop itself, you can show how the technology works and apply it to your site. Here is a my page with a loop that outputs all my books to a 2×2 grid. Use some object-oriented CSS in my topic to display 2 × Created 2 meshes. There are titles, excerpts and recommended images in the ring. The
The loop that runs for all my posts is as follows: There is only one argument named post in the loop within the load summary 30718a0ddb43635c2879db6c1b6f50fd. Therefore, all posts of this post type will be displayed starting from the most recent project. However, what we want is that the first post is displayed differently. Do that. To create a separate loop for the first post, you must create a separate loop to run the post if you want to display a different first post. To do this, you need two arguments. One is for the post type and the other is for the number of posts. This is the posts_per_page parameter. Please set 1. The
Use wp_query to copy and start the original loop so that there are two loops in the template file. Now edit the argument of the first argument and read it as: Load summary 30718a0ddb43635c2879db6c1b6f50fd only get recent posts. However, if you want to change something in the first ring,
Or it doesn’t make sense. I want to output excerpts and content. I also want to add styles to the layout so that recommended images and excerpts are displayed on top of the content. The following is a new version of the ring portion of the output post itself only for the first post. The
The contents of the load summary 30718a0ddb43635c2879db6c1b6f50fd have additional codes. In order to specify the layout style, some enclosed div elements may be added. This time also use the styles already in my theme. The first post on my page is: Male looks good. You may have noticed that I deleted the link to browse books (because the whole content is on the default page), but there is a button to purchase books imported from the post content. The loop of subsequent posts was modified, but there was a problem. The
Below is a screenshot showing the first post and its successors. The first post is currently being copied. Import from the original loop, and only import the first post from the new loop. This is modified by adding the additional argument offset argument to the second ring. This instructs WordPress to skip the set number of posts before importing the posts to output. Looking around the first ring shows a post, so you must offset it one by one. Note: if this technique has been used, the post_per_page parameter of the first ring and the offset parameter of the second ring must be the same. May not always be 1. The
Modify the arguments in the second ring: Load summary 30718a0ddb43635c2879db6c1b6f50fd now refresh the page and you will find that the first post is not repeated. That’s better! It is now finished. Created a custom page with two loops, one of which shows the rest of the recent post. What happens if you apply this technique to a standard ring, but the page is running a standard ring? In this case, you can edit the template file that runs the page and add a query using wp\u query. There is no need to create two new queries. The
This technology is divided into two stages: Use wp_query to add additional queries to the template file. In the function file of the topic, use pre\u get\u posts to modify the standard ring of the archive type and skip the first post. Add query opens the template file you want to edit first. All archive template files. In my case, if you output a custom post type using a standard template file, the file name is archive rmcc_book. Will become PHP. Before the main loop, use wp\u query to add an additional loop. Do this as described above. Copy and edit the contents of the default loop, but put it into the query provided by wp_query. Don’t forget that although the post type is in the archive template, the post\u type parameter is still required. The
After saving the template file, the first post is displayed twice, as shown in my working example. You cannot directly edit the argument of the first post in the main query to skip the default query in the archive file. Instead, you must use the pre\u get\u Posts hook. Functions Open the PHP file (or create a new one if not already) and add it as: Load the summary 30718a0ddb43635c2879db6c1b6f50fd. Here you can see that three condition labels are used. One is to check whether it is not on the management screen, the other is to check whether the default query is running, and the third is to check whether it is on the archive page.
. Article type. The condition tag for the post type (or category, etc.) can be found in the word press Codex. After saving the function file, you will notice that the first post is printed using a custom loop, and subsequent posts are printed through a standard loop. Note: this method sometimes breaks paging. If this happens, please follow the following principles: Wp\u query can highlight recent posts. Using this technique, you can use the wp_query class to display other content of recent posts or specify different styles. As can be seen from my example, I use this book to make recent books more prominent than other books. You can apply it to a standard loop of topic template files created using the wp_query class. After completion, the latest post will attract attention of readers. How will your website use this technology? Please share your comments in the comments below.

Author:

Leave a Reply

Your email address will not be published. Required fields are marked *