rootring

rooted in blogs, linked in a ring

Platform guides

WordPress

Best placement: Use the site footer so the navigation appears on every page.

This replaces YOUR-SITE in the examples on this page.

Steps

  1. Choose where you want the snippet: Footer is recommended. A sidebar also works.
  2. If you use a block theme, go to Appearance → Editor, open the Footer template part, add a Custom HTML block, and paste the snippet.
  3. If you use a classic theme, go to Appearance → Widgets, open a footer or sidebar widget area, add a Custom HTML widget or block, and paste the snippet.
  4. Replace YOUR-SITE with the URL rootring should use for your blog and confirm it appears on your homepage.

If you cannot find a global footer area

If you cannot find a global footer area, place it on your homepage first and move it into the footer later. If changes do not show up right away, clear caches or hard refresh the page.

Need a different look?

Once you know where to paste the snippet, you can use another version from the snippet gallery.

Recommended snippet

Replace YOUR-SITE with the URL rootring should use for your blog. Usually this is your homepage. If your ring links live on a separate public page, use that page URL instead.

Show code 
<nav class="webring webring--rail-default" aria-label="Webring">
  <span class="webring-label"><a href="https://rootr.ing/">rootring</a></span>
  <div class="webring-links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Directory</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</nav>

<style>
  .webring--rail-default {
    margin-top: .5rem;
    display: flex;
    gap: .9rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: .45rem;
    border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    font: inherit;
  }
  .webring--rail-default .webring-label {
    opacity: .78;
    letter-spacing: .04em;
    text-transform: lowercase;
    font-size: .84rem;
  }
  .webring--rail-default .webring-links {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
  }
  .webring--rail-default a {
    text-decoration: none;
  }
  .webring--rail-default a:hover {
    text-decoration: underline;
  }
</style>

Want a different look? Browse the snippet gallery.