imranhsayed

Open Source

woo-next

# [WooCommerce Nextjs React Theme](https://woo-next-imranhsayed.vercel.app/) :rocket: [![Project Status: Active.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) ![Stars](https://img.shields.io/github/stars/imranhsayed/woo-next?label=%E2%AD%90%20Stars) ![Forks](https://img.shields.io/github/forks/imranhsayed/woo-next?color=%23ff69b4) ![Contributors](https://img.shields.io/github/contributors/imranhsayed/woo-next?color=blue) ![Follow](https://img.shields.io/github/followers/imranhsayed?label=Please%20follow%20%20to%20support%20my%20work%20%F0%9F%99%8F&style=social) > * This is a React WooCommerce theme, built with Next JS, Webpack, Babel, Node, GraphQl 📹 [Full Course Video Tutorial](https://codeytek.com/course/woocommerce-with-react-course/) ## Important Note ⭐: The code for the Video Tutorial is in the branch [youtube-course](https://github.com/imranhsayed/woo-next/tree/youtube-course) However, since there is continuous contribution and updates to this project. The 'master' branch is upto date with those changes. You can also refer to the PR notes for changes. ## Demo Desktop :video_camera: ![](demos/home-demo.gif) ## Live Demo: [Live Demo Site](https://woo-next-imranhsayed.vercel.app/) ## Checkout Page Demo ![](demos/Checkout-page.gif) ## Payment Demo ( Paypal example ) ![](demos/paypal-payment-demo.gif) ## Order Received Demo ![](demos/order-received-demo.gif) ## Stripe Checkout [Stripe Demo Video](https://youtu.be/i75_Vtx-CnA) ![](demos/stripe-demo.gif) # Features: 1. WooCommerce Store in React( contains: Products Page, Single Product Page, AddToCart, CartPage and Checkout Page with country selection ). 2. SSR 3. SEO friendly 4. Automatic Code Splitting 5. Hot Reloading 6. Prefetching 8. Incremental Static (Re)generation ( Next.js 10 support ) 9. GraphQL with Apollo Client 10. Tailwindcss 11. Stripe Checkout ( with Stripe Session and Stripe webhook) ## Getting Started :rocket: These instructions will get you a copy of the project up and running on your local machine for development purposes. ### Prerequisites :page_facing_up: ### Installing :wrench: 1. Clone this repo using terminal `git clone [email protected]:imranhsayed/woo-next` 2. `cd woo-next` 3. `yarn install` ## Add GraphQl support for WordPress 1. Download and activate the following plugins , in your WordPress plugin directory: * [wp-graphql](https://github.com/imranhsayed/woo-next/tree/master/wordpress/plugins) Exposes graphql for WordPress ( **Tested with v-1.3.8** of this plugin ) * [wp-graphql-woocommerce](https://github.com/imranhsayed/woo-next/tree/master/wordpress/plugins) Adds Woocommerce functionality to a WPGraphQL schema ( **Tested with v-0.8.1** of this plugin ) * [headless-cms](https://github.com/imranhsayed/woo-next/tree/master/wordpress/plugins) Extends WPGraphQL Schema ( **Tested with v-1.8.0** of this plugin ) * Make sure Woocommerce plugin is also installed in your WordPress site. You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install ) `WP Dashboard > Tools > Import > WooCommerce products(CSV)`: The WooCommerce default products csv file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` ## Hero Carousel. To use Hero carousel, create a category called 'offers' from WordPress Dashboard > Products > Categories. Now create and assign as many child categories to this parent 'offers' category with name, description and image. These Child categories data will automatically be used to create hero carousel on the frontend. ## Configuration(for GraphQL implementation) :wrench: * _Note_ Below is for GraphQL implementation , for REST API check [feature/rest-api](https://github.com/imranhsayed/woo-next/tree/feature/rest-api) branch 1. (Required) Create a `.env` file taking reference from `.env-example` and update your WordPressSite URL. - `NEXT_PUBLIC_WORDPRESS_URL=https://example.com` ## Branch details 1. [feature/rest-api](https://github.com/imranhsayed/woo-next/tree/feature/rest-api) Contains REST API Implementation. 2. The `master` branch has the GraphQL implementation. ## Common Commands :computer: * `dev` Runs server in development mode ## Code Contributors ✰ Thanks to all the people who contributed to the code of this project 🤝 <div> <img src="https://github.com/imranhsayed.png?size=30" alt="Imran Sayed"> <img src="https://github.com/w3bdesign.png?size=30" alt="Daniel F"> <img src="https://github.com/delunix.png?size=30" alt="Fandi Rahmawan"> <img src="https://github.com/yudyananda.png?size=30" alt="yudyananda"> </div> ## Contributing :busts_in_silhouette: Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us. ## Versioning :bookmark_tabs: I use [Git](https://github.com/) for versioning. ## Author :bust_in_silhouette: * **[Imran Sayed](https://twitter.com/imranhsayed)** ## License :page_with_curl: This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

Frontend Templates E-commerce Platforms

898 Github Stars

Open Source

aquila

# [WordPress Theme - Aquila](https://youtu.be/lNtw4yxEydM) 🎨 [![Project Status: Active.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) * A WordPress theme Project for Advanced WordPress Theme Development Course. This theme uses Bootstrap. [Learn](https://www.youtube.com/playlist?list=PLD8nQCAhR3tT3ehpyOpoYeUj3KHDEVK9h) to build an Advanced WordPress Theme from scratch <a href="https://codeytek.com/course/advanced-wordpress-theme-development-course/" target="_blank"> <img src="https://codeytek.com/wp-content/uploads/2020/07/banner.png" alt="WordPress theme development banner" /> </a> ## [Tutorial Course](https://codeytek.com/course/advanced-wordpress-theme-development-course/) ## Also See - [Advanced WordPress Plugin Development](https://github.com/imranhsayed/aquila-features) ## Features: - ![](demo/features-one.png) - ![](demo/features-two.png) - Custom front page. - Custom Blog page with posts displayed in grid format using bootstrap. - Block Style Variations - Custom Gutenberg Blocks - InnerBlocks ## Maintainer | Name | Github Username | |--------------------------------------------------------|-----------------| | [Imran Sayed](mailto:[email protected]) | @imranhsayed | ## Usage 1. Clone the WordPress theme [aquila](https://github.com/imranhsayed/aquila) in your WordPress themes directory and activate it. ## Dashboard Setup. 1. Create pages called 'Home' and 'Blog' and set them from Appearance > Customizer > Homepage Settings like so: - ![](demo/home-page-customizer-setup.png) ## Development ( To be added ) **Install** Clone the repo and run ```bash cd aquila/assets npm install ``` **During development** ```bash npm run dev ``` Run precommit from assets directory before pushing the code for development/contribution. ``` cd assets && npm run precommit ``` **Production** ```bash npm run prod ``` **Linting & Formatting** The following command will fix most errors and show and remaining ones which cannot be fixed automatically. ```bash npm run lint:fix ``` We follow the stylelint configuration used in WordPress Gutenberg, run the following command to lint and fix styles. ```bash npm run stylelint:fix ``` Format code with prettier ( TO BE ADDED ) ```bash npm run format-js ``` Directory Structure ```php . ├── README.md ├── assets │ ├── main.js │ └── src │ └── library │ ├── css │ │ ├── bootstrap-grid.min.css │ │ └── bootstrap.min.css │ └── js │ └── bootstrap.min.js ├── demo │ ├── banner.png │ ├── blog-page.png │ ├── features-one.png │ ├── features-two.png │ └── home-page-customizer-setup.png ├── footer.php ├── front-page.php ( Home Page ) ├── functions.php ├── header.php ├── inc │ ├── classes │ │ ├── class-aquila-theme.php │ │ ├── class-assets.php │ │ ├── class-menus.php │ │ └── class-meta-boxes.php │ ├── helpers │ │ ├── autoloader.php │ │ └── template-tags.php │ └── traits │ └── trait-singleton.php ├── index.php ( Blog page ) ├── page.php ( Single Page ) ├── screenshot.png ├── single.php ( Single Post Page ) ├── style.css └── template-parts ├── components │ └── blog │ ├── entry-content.php │ ├── entry-footer.php │ ├── entry-header.php │ └── entry-meta.php ├── content-none.php ├── content.php └── header └── nav.php ``` ### Fixing Errors 1. Error: Node Sass does not yet support your current environment Solution : ```shell cd assets npm rebuild node-sass ```

WordPress Themes & Plugins

1.1K Github Stars

Open Source

gatsby-wordpress-themes

## 🎨 [Gatsby WordPress themes](https://www.npmjs.com/package/gatsby-wordpress-theme-phoenix) [![Project Status: Active.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![Download counter](https://img.shields.io/npm/dt/gatsby-wordpress-theme-phoenix.svg)](https://www.npmjs.com/package/gatsby-wordpress-theme-phoenix) - A Gatsby theme for WordPress, using Decoupled Architecture. - Front end in React - Backend in WordPress. <a href="https://youtu.be/nYXL1KKjKrc" target="_blank"> <img src="https://codeytek.com/woo/wp-content/uploads/2020/06/Phoenix.jpg" alt="gatsby theme phoenix hero image" /> </a> ### [Video Demo](https://youtu.be/nYXL1KKjKrc) *** 👨‍💻 Please star my repo to support my work 🙏 *** ## 🔥 Features 1. Uses React with Gatsby ( Blazing Fast ) 2. PWA ( Works Offline ) 3. Image Optimization ( blur effect ) 4. ACF 5. GraphQL ( with wp-graphql on WordPress ) 6. Blog Page with Pagination 7. Offline Search Feature 8. Categories, Archive Page, Custom Home Page 9. Custom Widgets, Menus 10. Yoast seo support 11. Supports Post and Page building with Elementor ## 🌐 Live Demo - [Demo on Netlify](https://gatsby-wordpress-theme-phoenix.netlify.app) - [Demo on Vercel](https://gatsby-wordpress-themes.imranhsayed.now.sh/) ![](demos/home-page-demo.png) ## 👨‍💻 Maintainer | Name | Github Username | |--------------------------------------------------------|-----------------| | [Imran Sayed](mailto:[email protected]) | @imranhsayed | ## 🚀 Set Up ### Gatsby Setup * Rename [`.env-example`](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/site/.env-example) in site directory file to `.env` and add the following, in this `site` directory of this repo. - Also set the `GATSBY_ELEMENTOR_SUPPORT` and `GATSBY_SIDEBAR` if you would like the theme to support page and post building with elementor and sidebar. ```shell script GATSBY_WORDPRESS_SITE_URL=xxx FRONTEND_URL=xxx # Set this to http://localhost:3000 for development and your live front-end gatsby url for production. GATSBY_ELEMENTOR_SUPPORT=true GATSBY_SIDEBAR=false ``` ### WordPress Setup 1. On your WordPress site, download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site. a. [Headless CMS](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/headless-cms.zip) b. [wp-graphql](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wp-graphql.zip) c. [wp-graphiql](https://github.com/wp-graphql/wp-graphiql) d. [ACF WordPress plugin](https://wordpress.org/plugins/advanced-custom-fields/) e. [wp-graphql-acf](https://github.com/wp-graphql/wp-graphql-acf) f. [Yoast-SEO](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wordpress-seo.14.5.zip) g. [wp-graphql-yoast-seo](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wp-graphql-yoast-seo.zip) 2. - Set Header menu as `HCMS Header Menu` ![](demos/header-menu-demo.png) - Set Footer menu as `HCMS Footer Menu` ![](demos/footer-menu-demo.png) 3. You can also set text widgets in #HCMS Footer #1 and #HCMS Footer #2 under Appearance > Widgets in WordPress. 4. Import all the ACF data from `wordpress/acf-data` json file of this repo, into WordPress by going to WordPress Dashboard > Custom Fields > Tools > Import 5. Create a Home Page ( if there isn't one already )and make sure you have a home page and Location rule is set to Home page. ![](demos/acf-home-screenshot.png) 6. Add the ACF required data on the Home page from WordPress Dashboard. 7. If isn't already set your site title, description and logo from WordPress customizer. **Open the source code and start editing!** `npm run dev` Your site is now running at `http://localhost:8000`! _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ ## 🚀 Development * Navigate into site’s directory. ```shell yarn install # Run this for the first time. npm run dev # During development. npm run build # When ready for production. ``` ### 📕 Storybook: For Storybook: * `cd package/gatsby-wordpress-theme-phoenix` * `npm run storybook` ![](demos/storybook.png) ### :package: Adding/Removing a new package to site folder `yarn workspace site add package-name` `yarn workspace site remove package-name` ### :package: Adding/Removing a new package to gatsby-wordpress-theme-phoenix folder `yarn workspace gatsby-wordpress-theme-phoenix add package-name` `yarn workspace gatsby-wordpress-theme-phoenix remove package-name` ## 🧐 What's inside? A quick look at the top-level files and directories you'll see in a Gatsby project. . ├── node_modules ├── demos ├── packages ├── src ├── .gitignore ├── .site ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json └── README.md 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 12. **`README.md`**: A text file containing useful reference information about your project. ### Useful Links ### 1. [Setting workspaces with yarn](https://www.gatsbyjs.org/blog/2019-05-22-setting-up-yarn-workspaces-for-theme-development/) for theme development 2. [Installing a gatsby theme](https://www.gatsbyjs.org/docs/themes/using-a-gatsby-theme/) and setting it up. ### Deployment #### With vercel - Signup on [vercel.com](https://vercel.com/) - Click on Import Project and then add the configurations. ![](demos/vercel-setting-one.png) - On [vercel](https://vercel.com/), make sure you add these from settings of the project: ![](demos/vercel-settings.png) #### From CLI: - `npm i -g vercel` - Now in the project root run `vercel` - Add the following configurations * build command: `npm run build` * output directory: `site/public` * development command: `npm run dev` * root directory: `/` ### Theme on npm [gatsby-wordpress-theme-phoenix](https://www.npmjs.com/package/gatsby-wordpress-theme-phoenix)

Web Development WordPress Themes & Plugins

348 Github Stars

Open Source

react-wordpress-theme

# React WordPress Theme 🎨 [![Project Status: WIP – Initial development is in progress.](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) A React theme for WordPress, using Decoupled Architecture. Front end in React. Backend in WordPress. ## Live Demo [Live Demo](https://react-wordpress-theme.netlify.app/) ![](demos/home.png) ## Performance ![](demos/performance.png) ## Maintainer | Name | Github Username | |--------------------------------------------------------|-----------------| | [Imran Sayed](mailto:[email protected]) | @imranhsayed | ## Usage 1. Clone the WordPress plugin [Headless CMS](https://github.com/imranhsayed/headless-cms) in your WordPress plugin directory and activate it. 2. The REST API endpoints, registers custom endpoints and also registers two menus. So please create two menus `Header Menu` and `Footer Menu` and select their respective menu location as `HCMS Header Menu` and `HCMS Footer Menu` as shown in the picture. - Set Header menu as `Travel Header Menu` ![](demos/header-menu.png) - Set Footer menu as `Travel Footer Menu` ![](demos/footer-menu.png) 3. Set the siteURL and other settings in `client-config.js`. ```javascript const config = { siteURL: 'xxxxxx', // e.g. 'https://wordpressSite.com' headerMenuLocation: 'hcms-menu-header', // Change this menu location name to another, if you would like a different menu to be used for header. footerMenuLocation: 'hcms-menu-footer', // Change this menu location name to another, if you would like a different menu to be used for footer. siteTitle: 'React WordPress Theme', // Will be used if we don't set site title from WordPress customizer. siteDescription: 'Awesome theme', // Will be used if we don't set site description from WordPress customizer. }; ``` More settings can be found in `client-config.js` ## Development **Install** Clone the repo and run ```bash npm install ``` **During development** Starts webpack dev server at `localhost:8080` ```bash npm run dev ``` **Production** Creates an `index.html` and JavaScript file in `build` directory. ```bash npm run prod ``` **Client Config** Put your site URL name in the `client-config.js`; const siteUrl = 'https://yourWordPressSite.com'; **Linting & Formatting** The following command will fix most errors and show and remaining ones which cannot be fixed automatically. ```bash npm run eslint:fix ``` We follow the stylelint configuration used in WordPress Gutenberg, run the following command to lint and fix styles. ```bash npm run stylelint:fix ``` Format code with prettier ```bash npm run format-js ``` Run test ```bash npm run test ``` Update test ```bash npm run test:update ``` **precommit** You should run precommit to check for any eslint, stylint errors/warnings and to ensure all tests are passing before making a PR ready for review. ```bash npm run precommit ```

Frontend Templates WordPress Themes & Plugins

70 Github Stars

Open Source

aquila-features

# aquila-features Advanced WordPress Plugin Development # Setup How to set up the plugin. ## Install Setup Packaaes. - `npm ci && composer install` # Development ## Start Development Server. - `npm run dev` ## Run PHPCS. - `npm run lint:php` - `npm run lint:php:fix`

Developer Tools WordPress Themes & Plugins

110 Github Stars

Software by imranhsayed

woo-next

aquila

gatsby-wordpress-themes

react-wordpress-theme

aquila-features