← All posts

Style a Hoster Downloads Page with a Gutenberg Template

hoster

If you sell or share self-hosted plugins, each one needs a download page that looks like the rest of your site. With Hoster you don't need a page builder for that. You style the downloads page in Gutenberg, using a template for the Hoster custom post type and a dynamic download button that picks up the right file for you. You build the layout once, and every download page gets the button without you pasting links by hand.

Create a template for the downloads post type

When all your download pages share one template, they all match your theme and you only design the layout once.

  1. Go to Appearance → Editor and open Templates.
  2. Add a template for the downloads custom post type. Name it single-downloads, with the "s" at the end, so WordPress uses it for every download.
  3. Build the layout with regular blocks, the same as for any other post or custom post type.

If one download needs a different look, you can also edit that download on its own, like any other post. In the video we open the Global Theming download and insert a block pattern to lay out the page.

Add the Download Dynamic Button

Updating hard-coded download links by hand is how you end up with broken or wrong links. The dynamic button reads the product's permalink for you.

  1. Insert the Download Dynamic Button block where the button should go. Its default label is Download product.
  2. Use the static button when you need a download button on regular pages instead. We'll cover the button options in more detail in a separate video.
  3. You can also set the button to open in a new tab.

Style the button and the page

The button uses the normal Gutenberg style controls, so it can follow your theme's colors and spacing.

  1. In the block sidebar, open the styles tab and set Color → Background. We picked the theme's Contrast color (#111111).
  2. Under Dimensions → Padding, add some padding.
  3. Click Update.

Next, swap the placeholder image for your plugin artwork: choose Replace and pick an image from the Media Library. After that, style the rest of the page to match, and you're done.

Open the preview and you'll see the finished download page. When a visitor clicks the button, the product downloads straight away.

Get Hoster → dplugins.com

Related posts