> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Build Your Own Blog/Post Listing

When the ready-made Blog/Post Listing styles don't match your design, build your own with the UiChemy Composer widget.


The **Blog/Post Listing** widget comes with a few ready-made styles to choose from. When none of them fit, click the **Learn More** button inside the widget, then follow the steps below to build your own design with the **UiChemy Composer** widget.

### Steps

<Steps>
  <Step title="Install the free UiChemy plugin" icon="download">
    In your WordPress dashboard, go to **Plugins → Add New Plugin**, search for **UiChemy**, click **Install Now**, then **Activate**. See [Install and Activate UiChemy](/uichemy-composer/getting-started/install).
  </Step>
  <Step title="Connect your AI tool (MCP)" icon="plug">
    Once UiChemy Pro is activated, go to **UiChemy → Home** and select the **AI Agent (MCP)** tab.

    1. Click **Generate connection**. This issues a secure Application Password so your AI tool can reach this site.
    2. Under **Pick your AI tool**, choose **Claude Desktop**, **Cursor**, **Codex**, **Antigravity**, or **Other**.
    3. Under **Add the MCP server**, use the **Prompt** or **Config** switch, click **Copy**, and add it to your AI tool.
    4. Restart your AI tool.

    Full steps for each tool are in [Set Up AI to WordPress](/ai-to-wordpress/set-up).
  </Step>
  <Step title="Copy the prompt" icon="clipboard-copy">
    Click **Copy Prompt** at the top-right of the prompt below, paste it into your AI tool, replace the parts in square brackets with your own details, and send it.

    <div className="prompt-copy">

    ```text
    Using UiChemy on my WordPress site, add a Composer widget to the page "[page name]".
    The ready-made Blog/Post Listing styles don't match my design, so build my own blog post listing with HTML, CSS and JavaScript that shows my latest [6] posts.
    Each card: featured image on the [left], a category badge, the post title, a short excerpt, and a Read More button linking to the post.
    Show [3] cards per row on desktop, [2] on tablet and [1] on mobile.
    Match my site's colours and fonts.
    ```

    </div>

    Your AI tool builds a native, editable Composer on that page. Ask for changes in the same chat until it looks right.
  </Step>
</Steps>

<Callout kind="tip">
Prefer to code it yourself? Add the Composer widget to your page and write the HTML, CSS and JavaScript in its **Code** tab. See [Code Tab](/uichemy-composer/uichemy-widget/code-tab).
</Callout>

### If It Doesn't Work

<ExpandableGroup>
  <Expandable title="The config under Add the MCP server isn't showing" default-open="false">
    Click **Generate connection** first. The page notes "Generate the connection above to reveal your real config.", the real values only appear once a connection exists.
  </Expandable>
  <Expandable title="My AI tool can't connect to the site" default-open="false">
    Make sure **Node.js 18 or newer** is installed on your computer, that you're signed in as an Administrator, and that you restarted the AI tool after adding the server. See [Set Up AI to WordPress](/ai-to-wordpress/set-up).
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Will my custom listing show new posts automatically?" default-open="false">
    Yes, as long as you ask for your latest posts in the prompt. The Composer pulls them from your site, so new posts appear on their own. See [Loops](/uichemy-composer/design-data/loops).
  </Expandable>
  <Expandable title="Can I show posts from one category only?" default-open="false">
    Yes. Add it to the prompt, for example "show my latest 6 posts from the [News] category".
  </Expandable>
  <Expandable title="Can I edit the design after the AI builds it?" default-open="false">
    Yes. The result is a normal Composer, so you can keep editing it in the **Editor** tab, the **Code** tab, or by asking your AI tool for changes.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Build Your Own Widget Design" href="/uichemy-composer/widget-styles/overview">
    See every populate widget.
  </Card>
  <Card title="Set Up AI to WordPress" href="/ai-to-wordpress/set-up">
    Connect Claude, Cursor, Codex, or Antigravity to your site.
  </Card>
</Columns>