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-kreis URL on the website. Members can browse, search, and join Circles directly from this page.

Der Shortcode funktioniert mit dem Gutenberg-Block-Editor und beliebte Seitenerstellungsprogramme wie Elementor und Divi.

Adding the Archive Shortcode With Gutenberg

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

1. Navigieren Sie zu Dashboard > Seiten > Neue Seite hinzufügen.
2. Fügen Sie einen Titel für die Seite hinzu.
3. Hinzufügen einer Kurzcode Block in den Inhaltsbereich der Seite.

4. Geben Sie den folgenden Shortcode ein:

[mpcirc-circles]

5. Klicken Sie auf veröffentlichen. um die Seite zu speichern.

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.

Fügen Sie zum Beispiel die Shortcode-Widget in Elementor oder die Code-Modul in Divi. Then, paste the following Circle archive shortcode into it:

[mpcirc-circles]

Das ist wichtig: 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. Navigieren Sie zu Dashboard > Seiten and open an existing page, or click Add New Page.
2. Klicken Sie auf die Block Inserter (+) button to add a new block.
3. Suche nach “Kreis” in the block search field.
4. Wählen Sie die Kreis block from the results.

5. In der Block-Einstellungen panel on the right side, use the Select Circle dropdown to choose the Circle to display.

6. Optionally, adjust the Anzeige und Feed Settings in the block panel to customize the Circle appearance.
7. Klicken Sie auf veröffentlichen. oder Update um die Seite zu speichern.

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 Block-Einstellungen 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);
• Sortierreihenfolge — 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. Navigieren Sie zu Dashboard > ClubSuite™ > Kreise.
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 bearbeiten 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	Standard	Accepted Values	Beschreibung
id	— (required)	Circle ID	The ID of the Circle to display.
Seite	feed	feed, members, rules, settings, moderation	The default page shown when the shortcode loads. Visitors can still navigate to other pages.
show_navigation	ja	yes, no	Show or hide the page navigation menu (Feed, Members, Rules, etc.).
show_hero	ja	yes, no	Show or hide the Circle header (hero image and title).
show_post_form	ja	yes, no	Show or hide the post creation form on the feed page.
show_search	ja	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.

Anmerkung: Die posts_per_page, posts_orderund 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. Navigieren Sie zu Dashboard > Seiten and open an existing page, or click Add New Page.
2. Hinzufügen einer Kurzcode Block in den Inhaltsbereich der Seite.

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

[mccirc-circle id="123"]

4. Klicken Sie auf veröffentlichen. oder Update um die Seite zu speichern.

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.

Fügen Sie zum Beispiel die Shortcode-Widget in Elementor oder die Code-Modul in 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:

• Verwenden Sie die single Circle shortcode or block to feature specific Circles on landing pages or membership areas;
• Verwenden Sie die archive shortcode to provide a full directory of Circles for members to browse;
• Anwenden der show_navigation="no" und show_hero="no" attributes when embedding a Circle in a sidebar or compact layout;
• Verwenden Sie die 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 Dokumentation.