How to Display Any Number of Posts in a WordPress Loop

Category Image 052

Do you want to show multiple blog posts in a WordPress loop?

Using the loop, WordPress processes each of the posts to be displayed on the current page. It formats them according to how they match specified criteria within the loop tags.

In this article, we will show how to display any number of posts in a WordPress loop.

How to display any number of posts in a WordPress loop

What Is the WordPress Loop?

The loop is used by WordPress to display each of your posts. It is PHP code that’s used in a WordPress theme to show a list of posts on a web page. It is an important part of WordPress code and is at the core of most queries.

In a WordPress loop, there are different functions that run to display posts. However, developers can customize how each post is shown in the loop by changing the template tags.

For example, the base tags in a loop will show the title, date, and content of the post in a loop. You can add custom tags and display additional information like the category, excerpt, custom fields, author name, and more.

The WordPress loop also lets you control the number of blog posts that you show on each page. This can be helpful when designing an author’s template, as you can control the number of posts displayed in each loop.

That being said, let’s see how to add any number of posts to a WordPress loop.

Adding Any Number of Posts in a WordPress Loop

Normally, you can set the number of posts to be displayed in the loop from your WordPress admin panel.

Simply head to Settings » Reading from the WordPress dashboard. By default, WordPress will show 10 posts.

Reading settings WordPress

However, you can override that number by using a Super Loop, which will allow you to display any number of posts in that specific WordPress loop.

This will allow you to customize the display settings of your pages, including author profiles, sidebars, and more.

First, you will need to open a template file where you would like to place the posts and then simply add this loop:

<?php
// if everything is in place and ready, let's start the loop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	// to display 'n' number of posts, we need to execute the loop 'n' number of times
	// so we define a numerical variable called '$count' and set its value to zero
	// with each iteration of the loop, the value of '$count' will increase by one
	// after the value of '$count' reaches the specified number, the loop will stop
	// *USER: change the 'n' to the number of posts that you would like to display

	<?php static $count = 0;
	if ( $count == "n" ) {
		break;
	} else { ?>

		// for CSS styling and layout purposes, we wrap the post content in a div
		// we then display the entire post content via the 'the_content()' function
		// *USER: change to '<?php the_excerpt(); ?>' to display post excerpts instead

		<div class="post">
			<?php the_title(); ?>
			<?php the_content(); ?>
		</div>

		// here, we continue with the limiting of the number of displayed posts
		// each iteration of the loop increases the value of '$count' by one
		// the final two lines complete the loop and close the if statement

		<?php $count ++;
	} ?>
<?php endwhile; ?>
<?php endif; ?>

Note: You will need to replace the value of ‘n‘ in the if ( $count == "n" ) part of the code and choose any number.

An easy way to add this code to your WordPress website is by using the WPCode plugin. It is the best code snippet plugin for WordPress that helps you manage custom code.

By using WPCode, you don’t have manually edit theme template files and risk breaking something. The plugin will automatically insert the code for you.

First, you need to install and activate the free WPCode plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you can head to Code Snippets » + Add Snippet from your WordPress dashboard. Next, you need to select the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

After that, simply paste the custom code for the WordPress loop that we showed you above into the ‘Code Preview’ area.

You will also need to enter a name for your code and set the ‘Code Type’ to ‘PHP Snippet’.

Add custom loop code to WPCode

Next, you can scroll down to the ‘Insertion’ section and choose where you would like to run the code.

By default, WPCode will run it everywhere on your WordPress website. However, you can change the location to a specific page or use a shortcode to insert the code.

Edit insertion method for code

For this tutorial, we will use the default ‘Auto Insert’ method.

When you are done, don’t forget to click the toggle at the top to make the code ‘Active’ and then click the ‘Save’ button. WPCode will now deploy the code on your WordPress blog and display the specified number of posts in the WordPress loop.

We hope this article helped you learn how to display any number of posts in a WordPress loop. You may also want to see our guide on how to exclude sticky posts from the loop in WordPress and our expert picks for the must-have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display Any Number of Posts in a WordPress Loop first appeared on WPBeginner.

OceanWP Theme Review: An All-Rounder Free WordPress Theme

Best Wordpress Themes 1

OceanWP is an exceptional free WordPress theme that provides a diverse range of premium features, making it a superb choice for any website. Its stylish design and extensive functionality have garnered immense popularity among developers and users alike. Professional Appearance and Customization Options One of the standout features of OceanWP is its ability to provide […]

The post OceanWP Theme Review: An All-Rounder Free WordPress Theme first appeared on WPArena and is written by Editorial Staff.

UniBlock: A Free Business Block Theme for WordPress

Best Wordpress Themes 1

WPZOOM is coming in strong with its first block theme approved for the WordPress Themes Directory. UniBlock is a beautifully designed theme that is well-suited for businesses and freelancers. The company plans to adopt the concept of full-site editing in other WPZOOM themes as well, following the release of UniBlock.

UniBlock’s default look is sporting a darker color palette in the navigation and above the fold, with a lighter background for the rest of the website. The video on the sample homepage uses the free WPZOOM Video Popup Block plugin, which supports Vimeo and YouTube. It’s a simple, lightweight block that allows users to customize the play button and play icon.

After activating the theme, clicking on ‘Customize’ will prompt the user to install the video plugin. It can also be converted to a Custom HTML block or removed entirely at the user’s discretion.

UniBlock’s 19 custom block patterns include everything one might expect from a business theme but, most impressively, it ships with five full-page patterns:

  • Front Page
  • About
  • Services
  • Blog
  • Contact

Alternatively, users can assign the page template in the post settings to get the same effect.

These full-page patterns are convenient for speedy page building. They make it possible to get a basic business website up in a matter of minutes. Here’s an example of the Services full-page pattern that will instantly embed when selected. Users can delete any sections they don’t need, add more blocks and patterns, and quickly fill in all their own information.

Separately there are patterns for a footer with text, links, multiple arrangements of featured boxes with text and button, multiple designs for call-to-action sections, pricing tables, team members with social icons, testimonials, header cover, sidebar, 404 page, and more.

Users can delve even further into customizing the templates with the site editor, as UniBlock is packaged with nearly two dozen templates and template parts. Here they can also edit the menu and adjust global styles.

WPZOOM is developing a Pro version of the theme to release in a few weeks with support for importing the whole demo, multiple color schemes, multiple demos, premium block patterns, and additional header and footer layouts.

Check out the demo on the WPZOOM website to see the theme in action. WPZOOM has also written documentation for UniBlock, which covers general topics like how to use block patterns, how to set up the front and blog pages, and how to create a menu in the site editor. Since the company’s most popular themes are what would be considered classic themes, UniBlock is new territory for most of their customers. It is so far the only block theme among WPZOOM’s collection of 31 themes.

Block theme adoption is slowly making its way across WordPress’ major theme shops and the official directory is now hosting 160 themes tagged for full-site editing. As more longtime theme companies make their block theme debuts and develop a base for future themes, WordPress users may start to see a rapid acceleration of the number and variety of block themes available. UniBlock is so far one of the few block themes in the directory with a singular focus on business websites. It is available to download for free from WordPress.org or via the admin themes panel.

Molten: A Free WordPress Block Theme for Restaurants

Best Wordpress Themes 1

Molten is a new block theme from first-time WordPress.org theme author Paul Truong, designed for chefs and restaurateurs to showcase their work. The theme puts the spotlight on food photography offset with bold typography featuring the Playfair Display font for headings and Source Sans Pro for paragraph text.

Truong is working on setting up a marketing site for the theme so there is no demo at this time. One drawback is that it does not include any full-page patterns where you can quickly build a homepage or menu page without having to think about how the design should go together. You will have to rely on your own sense of design but Molten comes packaged with ample patterns for building pages.

Molten has four different hero patterns, three “coming soon” patterns, and six “call to action” patterns in various layouts (media and text, full width cover with text and button, and three columns with images and content). The theme also comes with a large gallery block pattern and multiple location pattern designs.

There’s almost nothing worse than a restaurant website that makes you download a PDF menu. It’s not mobile or SEO-friendly, and downloading a separate file is a terrible user experience. Restaurateurs have traditionally used PDFs because it’s easier to update it by uploading and replacing the old files. It’s also easier to design it to approximate the printed menu. Blocks can make it easier for restaurants to abandon this practice of using PDFs. A block-based menu can be quickly edited and expanded as necessary without messing with uploading any files.

Molten includes four Menu block patterns with different layouts for wine lists, dishes, and pricing.

Molten packages nine templates and five template parts for users who want to dig into full-site editing. There are multiple light and dark footer and header designs, search, archive, a completely blank template, and more. It includes four style variations which can significantly change the mood of the website.

Overall, the theme has just about anything a restaurant or “coming soon” establishment may need in terms of layout and design. The default color palette has a simple black and white typography-forward design that puts the emphasis on the food. Molten is available for free from the WordPress Themes Directory.

Design Mode: A Free Portfolio Block Theme Designed for Freelancers and Agencies

Best Wordpress Themes 1

The count for WordPress block themes has reached 137. It’s a far cry from the 500 block themes WordPress Executive Director Josepha Haden-Chomphosy set as a goal for 2022, but the number is steadily climbing as theme authors find their footing and discover how quickly block themes can be created.

Brian Gardner is throwing his hat into the ring again with his latest release. Design Mode is a new block theme created for freelancers and agencies to showcase their services and work. After its release, several of Gardener’s contemporaries, fellow theme designers, remarked on how refreshing it is to see a block theme with “real world use cases,” as so many seem to be geared at bloggers.

Design Mode features Outfit, a geometric sans serif Google font, designed by Rodrigo Fuenzalida, a Venezuelan type designer based in Santiago de Chile. It is used for both headings and paragraph text throughout the theme.

The demo gives the best idea of what the theme looks like with a curated set of images, titles, captions, menus, and buttons all filled with content. Once installed and activated on a new site, the theme looks very similar to the demo but has a placeholder image instead of the photos used in the demo. This is because the photos did not have the right licensing for distribution on WordPress.org, but the way it ships has the advantage of giving users a visual blank slate for those featured sections.

Design Mode includes 10 different patterns, which are essentially all Aspects of the design deconstructed into parts. There are multiple patterns for sections with cover, heading, text, and button, a query grid with three columns, a section with text and separators, a footer, and a header with site title and navigation perfectly spaced. The theme also conveniently includes a whole page pattern that will instantly reproduce the homepage in the demo.

Design Mode is an opinionated theme. Users can adjust colors for background, text, and links, and adjust various templates via full-site editing, but it does not come with additional style variations. Personal blogs may benefit from a kaleidoscope of style variations but a well-designed portfolio theme does not usually lend itself well to wide variations in style. In this case fewer options is a good thing that should preserve the simple palette the theme packages.

This is a very fast theme by itself. Gardner reports that Design Mode scores 99 and 100 on Google page speed for mobile/desktop. Depending on what plugins and optimizations a user has active, this theme could be a good choice for performance-conscious WordPress users.

Design Mode is Gardner’s third block theme in the directory. It bears some similarities to his black and white minimalist Avant-Garde theme but has more of a friendly showcase vibe that is suitable for personal portfolios, agencies, and any kind of service business that would benefit from an elegant, structured design.

Design Mode is available for free on WordPress.org or inside WordPress via the admin themes browser.

WordPress 6.1 to Add a Block Themes Filter to Menu on the Theme Install Screen

Best Wordpress Themes 1

In July, WordPress’ Themes and Meta teams collaborated to add a new “Block Themes” menu item to the filter menu on the directory homepage in an effort to improve block themes’ visibility. Block themes currently account for less than 2% of the directory’s 9,900 themes but activating one is the only way users can take advantage of WordPress’ full-site editing capabilities.

Not all users hunt for their next theme directly on WordPress.org. One reason is that browsing themes inside the admin allows for using the Live Preview feature to see how the theme might look with a site’s particular content. Four weeks ago, WordPress contributor Jessica Lyschik opened a ticket proposing to add the same Block Themes filter menu to the theme browsing experience inside the admin.

image source: ticket #56283

The code to add this menu item was committed and users will be able to filter for block themes in WordPress 6.1, expected on October 25, 2022. This change also introduces two new action hooks:  install_themes_pre_block-themes (fires before the tab is rendered) and install_themes_block-themes (fires at the top the tab).

WordPress Themes Directory Adds Block Themes to Filter Menu

Best Wordpress Themes 1

This week has been heavy with theme news, as the discussion around improving block themes’ visibility in the directory became heated before the Themes Team landed on a course of action. Meta contributors added a new “Block Themes” menu item to the filter menu on the directory homepage, a solution that some classic theme developers fought tooth and nail to discourage in the ticket over the course of seven weeks.

Clicking on Block Themes displays themes that have the full-site-editing feature tag. Previously, block themes were buried three clicks deep and users had to know how to find them through the feature filter. They are now easily accessible from the directory landing page.

Although most WordPress themes support blocks in the content editor, the “block themes” identifier refers to themes that allow users to edit templates with blocks through the Site Editor.

As the landscape of themes is changing, contributors have been working towards building a shared lexicon for how they refer to themes that support full-site editing. When the team updated the Theme Handbook prior to the WordPress 5.9 release, they settled on using the term “classic” for PHP-based themes and “block” for those that support full-site editing.

Block themes are about to cross a major milestone in the directory. At the time of publishing there are 99 block themes available, representing roughly 1% of the directory’s total number of themes. As part of the project’s big picture goals for 2022, WordPress Executive Director Josepha Haden-Chomphosy set 500 block themes as a goal for the community. The number is not even halfway there but the newly released Create Block Theme plugin should give it a boost, as it allows anyone to design a theme in the editor and export it for others to use.

Anariel Design Releases Bricksy, Its Third WordPress Block Theme

Featured Imgs 08

Yesterday, Anariel Design’s third block theme, Bricksy, went live in the WordPress.org directory. Ana Segota, the co-founder and self-proclaimed “creative motor” of the company, has almost become a master at block-based theme design at this point, and this project is just her showing off her skills.

I actually took the theme for a spin over the weekend when I saw it was waiting in the review queue, so I have had a few days to play around with it. Despite a few trivial issues, it has quickly become one of my favorite block themes.

Bricksy WordPress theme home/blog page.  Header shows logo and menu. It is followed by a three-column section of Cover blocks with background images that include a header and button. Following that is a two-column grid of posts.
Bricksy blog page design.

While I have generally liked Anariel Design’s two previous block themes, Naledi and Clove, I could not see myself installing them on a real-world project. They were simply not my personal style. However, Bricksy is a theme I would definitely use if I had a project for it at the moment.

One of my favorite design elements is the cursive handwriting for the site logo, which is also used across various patterns.

Offset three columns of team member sections with images, names, roles, and social links.  In the center, there is a cursive header that reads "freedom," followed by "Our Team".
Team Alternative pattern with cursive header image.

The downside is that these are images, so they are not easily recreated by end-users without Photoshop chops. I would like to see the team reconsider using a handwriting-style font — maybe one from Google Fonts — that allows users to add custom text directly from the editor.

Bricksy has, hands down, some of the most beautifully-designed patterns I have seen in a block theme yet. In total, there are 32.

WordPress block pattern explorer, which displays a categories panel on the left and a three-column grid of patterns on the right.
Bricksy’s general block patterns.

It is making an early bid for my favorite theme of 2022, but I will not get ahead of myself. We still have almost an entire 12 months to go before I make that call.

It even includes a custom social links layout. More and more themes are bundling their own takes on this pattern, but Bricksy’s color scheme and default Cover block image stand out.

Cover block with a background of a pier over a lake. Content contains image, title, subtitle, link buttons, and a social links menu.
Social Links block pattern.

With 32 patterns, I could dedicate an entire post to them all, but I am limited on time. For the most part, they are layout-focused rather than industry-focused patterns. This means they can be used on a vast range of sites. However, the pricing tables and team sections make sense for small businesses. Bricksy also supports WooCommerce.

The most striking thing about each pattern is that they all seem to fit within the theme’s overall design. Often, when themes include dozens of block patterns, some of them can feel like an additional option simply for the sake of adding one more thing in. And, that never feels like the case with Bricksy.

For long-form content, the theme is decent. However, it could be better. Its 720px content width and 18px font size can quickly grow hard to read. Cutting the width anywhere from 80px to 120px makes it much more comfortable. Bumping the font size up a couple of extra pixels works too.

When I first activated the theme, I thought it was utterly broken. I had wondered how it managed to slip through the review system. The theme’s header was outputting seemingly random demo content. But, it was also familiar. I was positive it was a test post from my install.

Header of a website is erroneously displaying the content of a post, which is a table, image, and list.
Nav menu showing a blog post’s content.

The issue was tough to hunt down. After everything from deactivating plugins to scrubbing templates from the database, I finally found it. The ref key for the Navigation block in the theme’s header.html template part was the culprit. Bricksy pointed to a specific post ID in the code:

<!-- wp:navigation {"ref":4790,"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->

4790 is the ID of a literal post on my test install, so the Navigation block showed its content instead of a menu. Most likely, this was directly copied or exported from the site editor. Theme authors need to watch out for specific ID references in their code when building from the editor, making sure to remove them before shipping.

Aside from a couple of trivial issues and a single OMGBBQ one after activation, I enjoyed using the theme. It has found its place in my recommended-themes list.