KIŠIB Social Icons – ORCID

A WordPress plugin that adds ORCID as a new service option to the native WordPress Social Icons block.

Overview

This lightweight plugin extends WordPress's built-in Social Icons block (Gutenberg) to include ORCID (Open Researcher and Contributor ID) as a recognized service. It allows researchers and academics to add their ORCID ID links to their WordPress websites with proper icon styling and consistent visual integration.

Features

• Native Integration - Seamlessly adds ORCID to WordPress's core Social Icons block
• Custom Icon - Uses the official ORCID icon design
• Editor Support - Works perfectly in the Gutenberg block editor
• Automatic Detection - Recognizes ORCID URLs automatically
• Theme Compatible - Inherits colors from your WordPress theme
• No Configuration - Works out of the box after activation
• Minimal Footprint - Lightweight code with no external dependencies
• Frontend & Editor Styling - Consistent appearance in both editor and published pages

Requirements

• WordPress 5.8 or higher (Gutenberg block editor)
• PHP 7.4 or higher

Installation

Method 1: Upload via WordPress Admin (Recommended)

1. Download this repository as a ZIP file or create a ZIP containing all plugin files:

   • orcid.php
   • orcid-variation.js
   • orcid.css
   • orcid-editor.css
   • orcid.svg (the ORCID icon file)

2. Go to Plugins → Add New → Upload Plugin in your WordPress admin panel

3. Click Choose File and select the ZIP file

4. Click Install Now

5. Click Activate Plugin

Method 2: Manual Installation via FTP

1. Download all plugin files

2. Create a folder named kishib-social-icons-orcid in your /wp-content/plugins/ directory

3. Upload all files to this folder:

   /wp-content/plugins/kishib-social-icons-orcid/
   ├── orcid.php
   ├── orcid-variation.js
   ├── orcid.css
   ├── orcid-editor.css
   └── orcid.svg

4. Go to Plugins in WordPress admin and activate "KIŠIB Social Icons – ORCID"

Usage

Adding an ORCID Link

1. Edit a page or post in WordPress

2. Add or locate a Social Icons block

3. Click the + button to add a new social link

4. Type "ORCID" in the search box or scroll to find it

5. Click the ORCID option

6. Replace the placeholder URL with your ORCID iD:

   https://orcid.org/0000-0001-2345-6789

7. The ORCID icon will automatically appear

Customizing the ORCID Link

In the Block Settings Panel:

• Label - Add descriptive text (optional, usually hidden by default)
• Link Settings - Open in new tab (recommended for ORCID links)
• Colors - The icon inherits your theme's colors by default, but you can customize

Example ORCID URLs:

https://orcid.org/0000-0001-2345-6789
https://orcid.org/0000-0002-1234-5678

How It Works

Block Variation Registration

The plugin registers ORCID as a new variation of the core social-link block using WordPress's block variation API. This ensures native integration without modifying WordPress core files.

Automatic Icon Detection

The plugin uses two methods to ensure the ORCID icon displays correctly:

1. URL Detection - Automatically recognizes any URL containing orcid.org
2. Service Attribute - Responds to the service="orcid" attribute

Icon Rendering

• Editor - Uses CSS masks to display the ORCID icon with theme colors
• Frontend - Injects the ORCID SVG icon via a render filter
• Fallback - Prevents duplicate icons and ensures consistent styling

File Structure

kishib-social-icons-orcid/
├── orcid.php              # Main plugin file (enqueues assets, registers filters)
├── orcid-variation.js     # Registers ORCID as a block variation
├── orcid.css              # Frontend styling
├── orcid-editor.css       # Block editor styling
└── orcid.svg              # ORCID icon (official design)

Technical Details

PHP Hooks Used

• enqueue_block_editor_assets - Loads JavaScript and CSS in the block editor
• wp_enqueue_scripts - Loads CSS on the frontend
• render_block - Injects the ORCID SVG icon on the frontend

JavaScript Dependencies

• wp-blocks - WordPress blocks API
• wp-dom-ready - DOM ready utilities
• wp-element - React element creation

CSS Approach

• Editor - Uses CSS masks with ::before pseudo-elements
• Frontend - SVG injection via PHP filter
• Theme Integration - Inherits currentColor for seamless styling

Customization

Changing Icon Colors

The ORCID icon automatically inherits colors from your theme's Social Icons styling. To customize:

Option 1: Via Block Settings

• Select the Social Icons block
• Use the color picker in the block settings panel

Option 2: Via Custom CSS

.wp-social-link-orcid a {
  color: #A6CE39; /* ORCID brand green */
  background-color: #fff;
}

Option 3: ORCID Brand Colors

.wp-social-link-orcid a {
  color: #fff;
  background-color: #A6CE39; /* Official ORCID green */
}

Adjusting Icon Size

.wp-social-link-orcid .wp-block-social-link-anchor svg {
  width: 1.2em;
  height: 1.2em;
}

Troubleshooting

ORCID Icon Not Appearing

Problem: The ORCID option shows up, but the icon doesn't display

Solution:

• Verify that orcid.svg exists in the plugin folder
• Check that the plugin is properly activated
• Try clearing your browser cache and WordPress cache
• Ensure your theme supports the Social Icons block

Double Icons in Editor

Problem: Two icons appear in the block editor

Solution:

• The plugin includes CSS to prevent this, but if it persists:
• Clear your browser cache
• Deactivate and reactivate the plugin
• Check for CSS conflicts with other plugins

Icon Not Styled Correctly

Problem: The icon appears but doesn't match other social icons

Solution:

• Ensure your theme has proper Social Icons block styling
• Check that no other plugins are overriding Social Icons styles
• Try adding custom CSS (see Customization section)

Plugin Not Working After Update

Problem: Plugin stops working after WordPress update

Solution:

• Deactivate and reactivate the plugin
• Clear all caches (browser, WordPress, CDN)
• Check WordPress version compatibility (requires 5.8+)

About ORCID

ORCID (Open Researcher and Contributor ID) provides a persistent digital identifier that distinguishes researchers and supports automated linkages between researchers and their professional activities. Learn more at orcid.org.

Why Add ORCID to Your Website?

• Academic Identity - Establish your unique researcher identifier
• Publication Linking - Connect to all your research outputs
• Credibility - Show professional academic presence
• Discoverability - Make it easy for others to find your work
• Integration - ORCID is widely supported by publishers and institutions

Compatibility

Tested With:

• WordPress 5.8 - 6.4+
• Gutenberg block editor
• Classic themes and block themes
• Popular page builders (when using native Social Icons block)

Browser Support:

• Chrome/Edge (Chromium) 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari, Chrome Mobile)

Version History

1.3.0 (Current)

• Stable release with improved icon rendering
• Enhanced editor experience (prevents double icons)
• Consistent frontend and backend styling
• SVG mask implementation for better theme integration

Project Context

This plugin was developed for the KIŠIB project (Digital Corpus of Ancient West Asian Seals and Sealings) at the Berlin-Brandenburg Academy of Sciences to provide researchers with an easy way to add their ORCID iDs to their academic profiles on WordPress-based websites.

Contributing

Contributions are welcome! If you encounter bugs or have feature suggestions:

1. Open an issue in this repository
2. Describe the problem or feature request clearly
3. Include WordPress version and theme information if relevant

Author

Dr. Sebastian Hageneuer
Work Group Leader, KIŠIB
Berlin-Brandenburg Academy of Sciences

License

GPLv3 or later

Support

For questions, bug reports, or feature requests, please open an issue in this repository.

---

Note: This plugin extends WordPress core functionality and requires no additional configuration. It works seamlessly with any theme that supports the native Social Icons block.