PhpDev.App
imranhsayed/headless-cms

imranhsayed/headless-cms

Stars: 155

Forks: 18

Pull Requests: 51

Issues: 11

Watchers: 11

Last Updated: 2023-07-18 21:52:58

❤️ A WordPress plugin that adds features to use WordPress as a headless CMS with any front-end environment using REST API

License:

Languages: JavaScript, CSS, PHP, SCSS

https://codeytek.com

Headless CMS

Project Status: Active.

A WordPress plugin that adds features to use WordPress as a headless CMS with any front-end environment using REST API. This plugin provides multiple features and you can use the one's that are relevant to your front-end application. You don't necessarily need to use all.

Headless CMS WordPress Plugin

Install via Composer

composer require imranhsayed/headless-cms

Install from WordPress.org

Download and activate plugin from WordPress.org

Maintainer

Name Github Username
Imran Sayed @imranhsayed

Assets

Assets folder contains webpack setup and can be used for creating blocks or adding any other custom scripts like javascript for admin.

  • Run npm i from assets folder to install required npm packages.
  • Use npm run dev during development for assets.
  • Use npm run prod for production.
  • Use npm run eslint:fix js/fileName.js for fixing and linting eslint errors and warning.

REST API ENDPOINT

This plugin provides you different endpoints using WordPress REST API.

Getting Started 📋

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Prerequisites 🚪

You need to have any WordPress theme activated on your WordPress project, which has REST API enabled.

Installation 🔧

  1. Clone the plugin directory in the /wp-content/plugins/ directory, or install a zipped directory of this plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress

Example Frontend applications

Example of front-end applications where this plugin can be used:

  1. Gatsby WordPress Theme
  2. React Wordpress Theme

Features

  1. Custom REST API Endpoints.
  2. Social links in customizer.
  3. Image uploads for categories.
  4. Custom header and footer menus.
  5. Custom Widgets.
  6. Custom Header and Footer GraphQL fields when using wp-graphql plugin
  7. Adds coAuthors data in the GraphQL Api.
  • Adds option to add social links in customizer
  • Registers two custom menus for header ( menu location = hcms-menu-header ) and for footer ( menu location = hcms-menu-footer )
  • Registers the following sidebars
  1. HCMS Footer #1 with sidebar id 'hcms-sidebar-1'

  1. HCMS Footer #2 with sidebar id 'hcms-sidebar-2'

More Features

  1. Registers the sections for socials icons in the customizer
  • Social icons urls for 'facebook', 'twitter', 'instagram', 'youtube'

  1. Image upload features for categories
  • Provides Image upload features for categories.

  1. Plugin Settings Page

  • Settings for getting data for a custom page like Hero section, Search section, Featured post section, latest posts heading.

  • Registers custom end points

  1. Following fields when using wp-graphql plugin.

  • Custom Header and Footer GraphQL

  • WooCommerce Countries and States

{
  wooCountries {
    billingCountries {
      countryCode
      countryName
    }
    shippingCountries {
      countryCode
      countryName
    }
  }
  wooStates(countryCode: "in") {
    states {
      stateCode
      stateName
    }
  }
}
  • WooCommerce Shipping Zones.
{
  shippingInfo {
    shippingZones
    storePostCode
  }
}
  • Add Product to Wishlist Mutation ( Authenticated request )
mutation ADD_ITEM {
  addToWishlist(input: {clientMutationId: "example", productId: 340}) {
    clientMutationId
    error
    added
    productId
    wishlistProductIds
  }
}
  • Remove Product from Wishlist Mutation( Authenticated request )
mutation REMOVE_ITEM{
  removeFromWishlist(input: {clientMutationId: "example", productId: 340}) {
    error
    productId
    removed
    wishlistProductIds
  }
}
  • Get Products from Wishlist Mutation ( Authenticated request )
query GET_WISHLIST {
  getWishList {
    productIds
    error
    products {
      databaseId
      name
      slug
      buttonText
      image {
        alt
        src
        attachmentId
      }
      priceHtml
      productUrl
      stockQuantity
      stockStatus
      typename
    }
  }
}
  • Schema Details
  posts {
    nodes {
      seo {
        schemaDetails
      }
    }
  }

Available Endpoints:

Get single post ( GET request )

  • http://example.com/wp-json/rae/v1/post?post_id=1

Get posts by page no: ( GET Request )

  • http://example.com/wp-json/rae/v1/posts?page_no=1

Get header and footer date: ( GET Request )

  • Get the header data ( site title, site description , site logo URL, menu items ) and footer data ( footer menu items, social icons )
  • http://example.com/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer

Get WooCommerce Country and states ( GET Request )

  • /wp-json/rae/v1/wc/countries/
  • /wp-json/rae/v1/wc/states?countryCode=IN

Contributing 👥

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

I use Git for versioning.

Author 📝

License 📜

License: GPL v2

OPEN ISSUES

See all

RELEASES

See all