Feature suggestion / community mod: Add "All About Birds" and "Wikipedia" links to each Species card

[E-Wold]

The Species page currently lacks the Info and Wikipedia quick-link buttons that appear on the Overview and Recordings pages. Here's how to add them. The change requires two small edits to scripts/species.php — one CSS block and one HTML block.

---

Step 1 — Open the file

nano ~/BirdNET-Pi/scripts/species.php

---

Step 2 — Add the CSS

Use Ctrl+W to search for this exact line:

.stats-table tr td:last-child

You'll land on a line that looks like this:

.stats-table tr td:last-child { text-align: right; font-weight: 600; color: var(--text-primary); padding-bottom: 4px; }

Place your cursor at the end of that line and press Enter to create a new line. Paste these four lines:

.species-card-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.species-card-links .mrd-link-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--text-muted); background: var(--bg-input, #f1f5f9); border: 1px solid var(--border); transition: background 0.2s, color 0.2s; }
.species-card-links .mrd-link-pill img { width: 12px; height: 12px; }
.species-card-links .mrd-link-pill:hover { background: var(--accent); color: white; }

---

Step 3 — Add the HTML

Use Ctrl+W to search for this exact line:

</table>

There is only one </table> in this file. It's inside the species card loop and looks like this in context:

                        <tr><td>First:</td><td><?php echo date('n/j/Y', strtotime($bird['FirstDate'])); ?></td></tr>
                    </table>
                </div>
            </div>

Place your cursor at the end of the </table> line and press Enter. Paste these six lines:

                    <?php $info = get_info_url($sci_name); ?>
                    <div class="species-card-links">
                        <a href="<?php echo $info['URL']; ?>" target="_blank" class="mrd-link-pill"><img src="images/info.png"> <?php echo $info['TITLE']; ?></a>
                        <a href="https://wikipedia.org/wiki/<?php echo urlencode($sci_name); ?>" target="_blank" class="mrd-link-pill"><img src="images/wiki.png"> Wikipedia</a>
                    </div>

---

Step 4 — Save and exit

Press Ctrl+O, then Enter to save. Press Ctrl+X to exit nano. No service restart needed — reload the Species page in your browser and each card will show the links.

---

Notes:

• The Info link respects your database language setting — it will point to eBird if you've set a non-English language, or All About Birds for English.
• The Wikipedia link uses the scientific name for accuracy.
• The pill button styling is scoped to .species-card-links so it won't affect any other part of the UI.
• Tested on the zach7036 Enhanced Version fork running on Raspberry Pi 4B with RaspiOS Bookworm.

---

[zach7036]

Thanks! This shipped as a built-in feature in v2.0.0 — every card on the Species page now has All About Birds/eBird (following your INFO_SITE setting) and Wikipedia pills, plus a "Details & history" link to the bird's full detail page. Your patch guide worked well in the meantime, so thank you for writing it up.