Skip to content

Updated 4 min readView demo

The Changelog widget by Atomic Addons shows the release notes of your product, plugin or app on any page. You keep the changelog as a Markdown file — for example the CHANGELOG.md in your code repository — and give the widget its address. The widget turns the versions into headings and puts a colored label such as Added or Fixed in front of each entry. This guide covers adding the widget, writing the file and styling the result.

Enable the Changelog Widget

Changelog is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

  1. 1

    Go to WordPress Dashboard → Atomic Addons.

  2. 2

    Click the Widgets tab.

  3. 3

    Search for Changelog. You can also open the Content category.

  4. 4

    Turn the Changelog widget on.

  5. 5

    Click Save Settings.

Add the Changelog Widget

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Changelog. The widget sits in the Atomic Addons category.

  3. 3

    Drag it into the page and set it up with the controls below.

  4. 4

    Click Publish (or Update).

Until you add a file, the editor shows a short hint and a sample changelog so you can try the style controls. Visitors see nothing until a file is set.

Content

Open the widget and go to Content → Content:

  1. 1

    Changelog File: The full URL of your changelog, such as https://example.com/changelog.md or the raw link of a CHANGELOG.md file on GitHub. The field accepts Dynamic Tags.

  2. 2

    Cache the File: An Atomic Addons Pro option. When it is on, the widget keeps the loaded changelog instead of downloading the file on every page view.

  3. 3

    Cache Time: Shows when Cache the File is on: how many hours to keep the copy before loading the file again. 6 by default; the shortest time is 1 hour.

The file must be reachable on the public internet and return the file itself. Addresses on your own computer or a private network, such as localhost, are refused. If the file cannot be loaded, the editor shows the reason and visitors see nothing.

To show a change in the file straight away while caching is on, turn Cache the File off and back on in the editor, then update the page.

Write the Changelog File

The widget reads ordinary Markdown with three rules:

  • Each version is a level-two heading: ## Version 2.1.0.
  • Each type of change is a level-three heading under the version: ### Added, ### Fixed, ### Updated, ### Changed, ### Removed, ### Note or ### Language. Capital letters do not matter.
  • The entries are a list under that heading, one line each, starting with - .

Every list entry gets the label of the heading above it, so an entry under ### Fixed starts with a Fixed label. A list under any other heading shows without a label. Links, bold text and other Markdown in an entry work as usual.

Style the Changelog

Everything below is on the Style tab.

  • Changelog — the Title tab styles the version headings: color, spacing below, Top Spacing and Divider Color for the line above each version after the first, and typography. The Text tab styles the entries: color, Link Color, the Spacing between label and text, Label Padding and typography. List Spacing sets the gap between entries.
  • Added, Fixed, Updated, Note, Removed, Language and Changed — one section per label, each with its text color, background, border, border radius and typography. Note and Language also have a box shadow.

Can't find what you need?

Our support team can help with setup questions and anything the docs don't cover yet.

Contact support