This WordPress plugin creates a custom block for displaying a featured article alongside a list of related articles. The data is fetched using Advanced Custom Fields (ACF), and the block is rendered on the frontend of the site.
The Belov Test Task Block Plugin provides a custom block that displays a featured article with its image, title, category, author, and publication date. Below the featured article, it lists related articles using ACF’s relationship field. This plugin is designed to integrate easily with WordPress themes and offers flexibility for content display.
- Displays a featured article with its details (title, image, category, author, date).
- Shows a list of related articles fetched using ACF’s relationship field.
- Option to customize article display (e.g., featured image, author, date).
- Fully responsive design and easy to integrate with themes.
- WordPress 5.0 or higher
- Advanced Custom Fields (ACF) plugin installed and activated
- A theme compatible with Gutenberg blocks
- PHP 7.2 or higher
- Download the plugin from this repository.
- Install the plugin via the WordPress dashboard:
- Go to
Plugins > Add New > Upload Plugin
. - Upload the plugin
.zip
file and activate the plugin.
- Go to
- Activate the plugin from the WordPress dashboard.
- Featured Article: Create a new ACF field group and add a field of type
Post Object
. Set it to allow selecting a post and name itfeatured_article
. - Articles List: Add a
Relationship
field to allow selecting related articles. Name itarticles_list
.
After configuring the ACF fields, the plugin will render the block on your site.
Once activated, you can add the custom block to any page or post using the Gutenberg editor:
- Go to
Posts > Add New
orPages > Add New
in the WordPress admin dashboard. - Open the Gutenberg editor and click the "+" icon to add a new block.
- Search for the "Belov Test Block" and add it to your page/post.
- Select a featured article and related articles using the ACF fields.
The block will render the featured article and related articles dynamically.
You can customize the block appearance and functionality by editing the plugin files or overriding its template in your theme.
- Block Styles: You can customize the block’s CSS styles by adding styles to your theme’s stylesheet or the plugin’s CSS file.
- Template Overriding: Copy the template file
block-template.php
from the plugin to your theme’sblocks
directory to modify the HTML structure.
The plugin code includes:
- PHP Template: Handles the rendering of the featured article and related articles.
- ACF Fields: Fetches data using ACF’s
get_field()
function. - HTML Markup: Outputs HTML for displaying articles, images, and metadata.
- CSS Styling: The plugin’s basic styles are inlined for simplicity, but can be customized.
This plugin is licensed under the GPL-2.0-or-later License.
Contributions are welcome! If you find any bugs or would like to add new features, feel free to submit an issue or pull request.
- Fork the repository.
- Create a new branch for your feature or bugfix.
- Write tests for your changes.
- Submit a pull request.
- Martin Ndegwa Moche
Email: ndegwamoche@gmail.com
GitHub: https://github.com/ndegwamoche
- Thanks to the Advanced Custom Fields plugin for providing an easy way to fetch custom fields.
- Thanks to the WordPress community for creating such a powerful platform.