WP Manifestindependent plugin directory
manifest / content / serviceadd-custompluging-for-wordpress

Team Service Grid

A customizable service grid system with expandable content, custom styling options, and admin management.

by Tiran Chanuka · github.com/tiranchanuka/serviceadd-custompluging-for-wordpress

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/tiranchanuka/serviceadd-custompluging-for-wordpress/archive/refs/heads/main.zip
Readme github.com/tiranchanuka/serviceadd-custompluging-for-wordpress ↗

Team Service Grid - WordPress Plugin Documentation

Overview

Team Service Grid is a WordPress plugin that provides a customizable grid system for displaying services in a visually appealing layout. The plugin focuses on displaying service cards in a grid format without individual service pages.

Version: 1.0 Author: Tiran Chanuka

Features

  • Responsive service grid display with customizable columns (1-4)
  • Customizable colors, typography and styling options
  • "Read More" expandable content functionality
  • Call-to-action (CTA) overlay on service images
  • Social sharing buttons for each service
  • Search/filter functionality for finding services
  • Theme color integration capability

Installation

  1. Upload the ServiceAdd folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Configure the plugin settings under 'Service Grid' in the admin menu

Basic Usage

Adding Services

  1. In your WordPress admin dashboard, navigate to Services → Add New
  2. Enter a title for your service
  3. Add content in the editor
  4. Set a featured image (recommended size: at least 600px wide)
  5. Add optional service details in the "Service Details" metabox
  6. Publish the service

Displaying Services

Use the shortcode [team_service_grid] to display your services grid on any page or post.

Basic shortcode usage:

[team_service_grid]

Shortcode Options

The plugin supports various parameters to customize the services display:

Parameter Description Default Example
columns Number of columns (1-4) 3 columns="2"
limit Number of services to display (-1 for all) -1 limit="6"
orderby Order services by (title, date, menu_order, rand) title orderby="date"
order Sort order (ASC or DESC) ASC order="DESC"
include Include specific services by ID empty include="42,51,63"
primary_color Custom primary color plugin setting primary_color="#ff6600"
read_more Enable/disable read more functionality yes read_more="no"
cta_overlay Enable/disable CTA overlay on images yes cta_overlay="no"
enable_filter Enable/disable search filter yes enable_filter="no"
enable_social Enable/disable social sharing yes enable_social="no"
use_theme_colors Use theme colors instead of custom colors no use_theme_colors="yes"

Example Shortcode

[team_service_grid columns="2" limit="6" orderby="date" order="DESC" enable_filter="yes" enable_social="no"]

Configuration Options

General Settings

  • Grid Columns: Number of columns in the service grid (1-4)
  • Card Border Radius: Border radius for service cards in pixels
  • Enable "Read More" Button: Toggle the Read More functionality
  • Enable CTA Overlay on Image Hover: Toggle the CTA overlay on service images
  • Enable Search Filter: Toggle the search/filter functionality
  • Enable Social Sharing: Toggle social sharing buttons
  • Use Theme Colors: Use colors from your theme instead of custom colors

Color Settings

  • Primary Color: Used for service title background and button borders
  • Hover Color: Used for button hover effects
  • Title Text Color: Used for service title text
  • Button Text Color: Default text color for buttons
  • Button Hover Text Color: Text color for buttons when hovered

Call to Action Settings

  • Default CTA Button Text: Default text for the CTA button
  • Default CTA Button URL: Default URL for the CTA button

Typography Settings

  • Font Family: Select font family for the service grid
  • Title Font Size: Font size for service titles
  • Content Font Size: Font size for service content

Service Settings

Each service can have its own custom settings:

  • Preview Text: A short description that appears on the service card
  • CTA Button Text: Custom call-to-action text for this service
  • CTA Button URL: Custom call-to-action URL for this service
  • Custom Color: A service-specific color that overrides the global setting

Troubleshooting

If you experience issues with the service grid display:

  1. Refresh Plugin Settings: Go to Service Grid → Troubleshooting and click "Refresh Plugin Settings"
  2. Clear Browser Cache: Your browser may be caching older versions of the page
  3. Reset Plugin: If the above solutions don't work, try resetting the plugin

CSS Customization

The plugin generates custom CSS based on your settings, but you can add additional custom CSS to your theme to further customize the appearance.

Main CSS Classes

  • .atsg-service-grid: The main grid container
  • .atsg-service: Individual service card container
  • .atsg-service-image: Service image container
  • .atsg-service-title: Service title container
  • .atsg-service-content: Service content container
  • .atsg-service-preview: Preview text container
  • .atsg-read-more-button: Read more button
  • .atsg-cta-button: Call to action button
  • .atsg-social-share: Social sharing container

Advanced: Hooks and Filters

For developers looking to extend the plugin functionality, the following hooks are available:

  1. atsg_service_grid_args: Filter the query arguments for the services grid
  2. atsg_service_html: Filter the HTML for each service card
  3. atsg_social_networks: Filter the available social networks for sharing

Credits

Team Service Grid is developed by Tiran Chanuka.

Support

For support or feature requests, please contact the plugin author.

This documentation is for Team Service Grid version 1.0