Displaying MemberPress Circles With Block and Shortcodes

MemberPress provides a Gutenberg block and shortcodes for displaying Circles on any page or post. The Circle block and shortcodes give full control over how Circles appear on the website.

This document explains how to use the Circle archive shortcode, the single Circle block, and the single Circle shortcode. These options allow Circles to be embedded anywhere, with customizable display settings.

Circle Archive Shortcode

The Circle archive shortcode displays the full Circles archive on any page. This is the same listing available at the default /mp-circle URL on the website. Members can browse, search, and join Circles directly from this page.

El shortcode funciona con el Editor de bloques Gutenberg y constructores de páginas populares como Elementor y Divi.

Adding the Archive Shortcode With Gutenberg

Follow these steps to add the Circles archive to any page or post:

1. Vaya a Panel > Páginas > Añadir nueva página.
2. Añade un título a la página.
3. Añadir un Código corto al área de contenido de la página.

4. Introduzca el siguiente shortcode:

[mpcirc-circles]

5. Haga clic en Publique para guardar la página.

The page will now display the Circles archive with all visible Circles.

Adding the Archive Shortcode With Page Builders

The Circle archive shortcode can be added to pages created with almost any page builder. To do this, use the page builder's shortcode module to add the Circle archive shortcode to a page.

Por ejemplo, añada el Widget de código corto en Elementor o el Módulo de código en Divi. Then, paste the following Circle archive shortcode into it:

[mpcirc-circles]

Importante: Only one Circle archive shortcode can be added to each page. Embedding multiple archive shortcodes on the same page will cause conflicts.

Single Circle Block

MemberPress includes a dedicated Gutenberg block for displaying a single Circle on any page or post. The Circle block provides a visual way to embed a specific Circle without writing shortcode.

The block uses the same rendering system as Circle pages. It respects all existing access control and visibility settings configured for each Circle.

Adding the Circle Block

Follow these steps to add the Circle block to a page or post:

1. Vaya a Panel > Páginas and open an existing page, or click Add New Page.
2. Haga clic en el botón Block Inserter (+) button to add a new block.
3. Buscar “Círculo” in the block search field.
4. Seleccione Círculo block from the results.

5. En el Ajustes de bloque panel on the right side, use the Select Circle dropdown to choose the Circle to display.

6. Optionally, adjust the Mostrar y Feed Settings in the block panel to customize the Circle appearance.
7. Haga clic en Publique o Actualización para guardar la página.

The editor will show a live preview of the Circle, including the hero image, navigation tabs, feed, and posts.

Circle Block Display Settings

The Circle block provides the same display options as the single Circle shortcode attributes. These settings are available in the Ajustes de bloque panel when the Circle block is selected:

• Default Page — sets the page shown when the block loads (Feed, Members, Rules, Settings, or Moderation);
• Show Navigation — toggles the page navigation menu (Feed, Rules, Members, Chat, Moderation, Settings);
• Show Circle Header — toggles the Circle hero image and title;
• Show Post Form — toggles the post creation form on the feed page;
• Show Search & Filters — toggles the search and sorting controls on the feed page;
• Posts Per Page — sets the number of posts displayed per page (set to 0 to use the site default);
• Orden de clasificación — sets the default sort order for posts (Default, Recent, Popular, or Discussed);
• Search Keyword — pre-fills the search to show only matching posts.

Single Circle Shortcode

The single Circle shortcode displays one specific Circle on any page or post. Unlike the archive shortcode that shows all Circles, this shortcode renders only the Circle matching the provided ID.

This shortcode requires the Circle ID. For example, to display the Circle with the ID of 123, the following shortcode should be used:

[mccirc-circle id="123"]

The single Circle shortcode respects all existing access control and visibility settings configured for the Circle.

Finding the Circle ID

To find the ID of a Circle, follow these steps:

1. Vaya a Panel de control > ClubSuite™ > Círculos.
2. Hover over the Circle name. The Circle ID will appear in the URL shown in the browser status bar. The ID is the number after post= in the URL.

Alternatively, click Editar on the Circle. The Circle ID will be visible in the browser address bar URL.

Shortcode Attributes

The single Circle shortcode supports multiple attributes that control the Circle display. The table below lists all available attributes:

Attribute	Por defecto	Accepted Values	Descripción
id	— (required)	Circle ID	The ID of the Circle to display.
página	feed	feed, members, rules, settings, moderation	The default page shown when the shortcode loads. Visitors can still navigate to other pages.
show_navigation	sí	yes, no	Show or hide the page navigation menu (Feed, Members, Rules, etc.).
show_hero	sí	yes, no	Show or hide the Circle header (hero image and title).
show_post_form	sí	yes, no	Show or hide the post creation form on the feed page.
show_search	sí	yes, no	Show or hide the search and sorting controls on the feed page.
posts_per_page	Site default	Any positive number	Number of posts to display per page on the feed.
posts_order	recent	recent, popular, discussed	Default sort order for posts on the feed page.
posts_search	—	Any text	Pre-fill the search with a keyword to show only matching posts.

Nota: En posts_per_page, posts_ordery posts_search attributes only apply to the feed page. They do not affect the members or moderation pages.

Override Behavior

When a visitor uses the search or sorting controls on the page, the URL parameters override the shortcode defaults. For example, setting posts_order="popular" in the shortcode displays posts sorted by popularity. However, if a visitor selects “Most Recent” using the dropdown, the visitor's selection takes priority.

Shortcode Examples

Below are examples showing different attribute combinations for the single Circle shortcode. In all examples, the dummy Circle ID of 123 is used. Replace this ID with the actual Circle ID.

Basic usage — display a Circle feed:

[mccirc-circle id="123"]

Start on the members page with no hero banner:

[mccirc-circle id="123" page="members" show_hero="no"]

Read-only feed — hide the post form and search controls:

[mccirc-circle id="123" show_post_form="no" show_search="no"]

Compact feed — show 5 posts per page, sorted by popularity:

[mccirc-circle id="123" posts_per_page="5" posts_order="popular"]

Minimal embed — feed only, no navigation or hero:

[mccirc-circle id="123" show_navigation="no" show_hero="no"]

Pre-filtered feed — show only posts matching a keyword:

[mccirc-circle id="123" posts_search="announcement"]

Full customization — all attributes combined:

[mccirc-circle id="123" page="feed" show_navigation="yes" show_hero="no" show_post_form="no" show_search="yes" posts_per_page="3" posts_order="discussed"]

Adding the Single Circle Shortcode With Gutenberg

Follow these steps to add a single Circle shortcode using the Gutenberg editor:

1. Vaya a Panel > Páginas and open an existing page, or click Add New Page.
2. Añadir un Código corto al área de contenido de la página.

3. Enter the shortcode with the Circle ID and any desired attributes. For example:

[mccirc-circle id="123"]

4. Haga clic en Publique o Actualización para guardar la página.

Adding the Single Circle Shortcode With Page Builders

The single Circle shortcode can be added to pages built with page builders. Use the page builder's shortcode module to paste the shortcode.

Por ejemplo, añada el Widget de código corto en Elementor o el Módulo de código en Divi. Then, paste the single Circle shortcode with attributes into it.

Best Practices for Displaying Circles

When embedding Circles on custom pages, consider the following recommendations:

• Utilice la single Circle shortcode or block to feature specific Circles on landing pages or membership areas;
• Utilice la archive shortcode to provide a full directory of Circles for members to browse;
• Aplique el show_navigation="no" y show_hero="no" attributes when embedding a Circle in a sidebar or compact layout;
• Utilice la posts_search attribute to create pre-filtered views that highlight specific topics within a Circle.

For more details on creating and configuring Circles, refer to the creating and managing Circles documentación.