Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updating packages #99

Merged
merged 24 commits into from
Sep 20, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
4596b87
updating packages
iruzevic Aug 1, 2018
be119de
global refactoring of css, js, php
iruzevic Aug 2, 2018
b533ece
Merge branch 'development' into feature/refactoring
iruzevic Aug 2, 2018
8977446
updating gitignore
iruzevic Aug 2, 2018
1ee7355
Merge branch 'feature/refactoring' of github.com:infinum/wp-boilerpla…
iruzevic Aug 2, 2018
30181ae
css quick fix
iruzevic Aug 2, 2018
5886688
adding quick fix
iruzevic Aug 3, 2018
bd3d9d7
returning featured image :D
iruzevic Aug 3, 2018
560acea
removing postcss-next
iruzevic Aug 4, 2018
f2574fa
updating readme script
iruzevic Aug 4, 2018
b3b8a60
styling for rename script
iruzevic Aug 4, 2018
aac92b6
updating readme file
iruzevic Aug 4, 2018
bee0ee3
packages updated, fixed creation of source maps, minor bug in class-m…
iruzevic Sep 1, 2018
5824ee2
updating composer and fixing all linting errors and warnings
iruzevic Sep 1, 2018
f143933
updating readme
iruzevic Sep 2, 2018
a671cf7
removing bugsnag
iruzevic Sep 2, 2018
25f5f36
updating copy
iruzevic Sep 2, 2018
2f85f80
loading scrips in footer
iruzevic Sep 2, 2018
34a8bbf
removing media size
iruzevic Sep 2, 2018
f3a88a3
implementing object helper and removing file_get_content
iruzevic Sep 19, 2018
81cd6c1
Merge commit '7bc91268d18f2cf36eea999a8bf74ee3c9f62ba3' into feature/…
iruzevic Sep 19, 2018
514997b
fix
iruzevic Sep 20, 2018
e346184
Added ignore rule in the standards
dingo-d Sep 20, 2018
ebe6a2d
Added ignore rule about script in footer, mninor refactor of multilin…
dingo-d Sep 20, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "not ie < 11", "android >= 4.2"],
"node": "current"
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"last 2 versions",
"not ie < 11",
"android >= 4.2"
],
"node": "current"
}
}
}]
]
],
"plugins": ["syntax-dynamic-import"]
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
44 changes: 14 additions & 30 deletions README-project.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Development and deployment
# Project info

## Database
Before you start developing ask a lead developer to export you the latest version of the database.
Expand Down Expand Up @@ -31,35 +31,19 @@ Before you start developing ask a lead developer to export you the latest versio
For syncing the production server with staging and development you have 3 shell scripts.
The use [`WP-CLI`](https://wp-cli.org/) so be sure that your server has this module installed.

#### Export:
Once you run this script it will export your database and uploads folder. Everything is compressed and exported in `latest_dump.tar.gz` file in the root of your project.
1. **Export** - Once you run this script it will export your database and uploads folder. Everything is compressed and exported in `latest_dump.tar.gz` file in the root of your project.

```bash
bash bin/db-export.sh
```
```bash
bash bin/db-export.sh
```
2. **Import** - Once you run this script it will **delete the current database** and import the new one from `latest_dump.tar.gz` file that must be located in the root of the project. Uploads folder must be manually moved to the `wp-content` folder.

#### Import
Once you run this script it will **delete the current database** and import the new one from `latest_dump.tar.gz` file that must be located in the root of the project.
Production > Dev env.
```bash
bash bin/db-import-production-to-dev.sh
```

Uploads folder must be manually moved to the `wp-content` folder.

```bash
bash bin/db-import-production-to-dev.sh
bash bin/db-import-production-to-staging.sh
```

## wp-config.php
This is project specific configuration that you can tailor according to your project needs.
At the bottom of the `wp-config.php` file before `require_once ABSPATH . 'wp-settings.php';` add this part:

```php
// Include wp config for your project.
require_once( ABSPATH . 'wp-config-project.php' );
```

And this global variable somewhere before wp-settings and wp-config-project.php. Set what instance you are using.
```php
// Must be set.
// Possible options are develop, staging and production.
define( 'INF_ENV', 'develop' );
```
Produtcion > Staging env.
```bash
bash bin/db-import-production-to-staging.sh
```
234 changes: 88 additions & 146 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,222 +1,164 @@
# Infinum WordPress Boilerplate
# Eightshift WordPress Boilerplate

[![Travis](https://img.shields.io/travis/infinum/wp-boilerplate.svg?style=for-the-badge)](https://github.com/infinum/wp-boilerplate)
[![GitHub tag](https://img.shields.io/github/tag/infinum/wp-boilerplate.svg?style=for-the-badge)](https://github.com/infinum/wp-boilerplate)
[![GitHub stars](https://img.shields.io/github/stars/infinum/wp-boilerplate.svg?style=for-the-badge&label=Stars)](https://github.com/infinum/wp-boilerplate/)
[![license](https://img.shields.io/github/license/infinum/wp-boilerplate.svg?style=for-the-badge)](https://github.com/infinum/wp-boilerplate)



This repository contains all the tools you need to start building a modern WordPress theme, using all the latest front end development tools.

## Who do I talk to?
## Getting started

For questions talk to:
First you need to install WordPress locally, using any of the local development environment you prefer. You can use XAMPP, MAMP, WAMP, VVV, Docker or Laravel Valet. You'll also need to have [Node.js](https://nodejs.org/en/), [Composer](https://getcomposer.org/) and [WP-CLI](https://wp-cli.org/) installed.

* [[email protected]]([email protected])
* [[email protected]]([email protected])
* [[email protected]]([email protected])
## Initial Setup
1. To start, fork this repository to your own, and then clone it. If you are using VVV clone it in the `public_html` folder:

## It contains:

* Webpack4+ config and build
* ES Linting
* Style Linting
* PHP Error Check
* WPCS Style Guide
* BrowserSync
* PostCSS with plugins
* Build and Prebuild Bash Script
* .gitignore
* Sass files based on Infinum Handbook
* Precreated template files and helpers
* BEM menues
* Google rich snippets
* Object oriented codebase
* Namespacing
* Autoloader
* Project-specific wp-config
* Import / export scripts
* Project setup wizard
* ...
```bash
git clone [email protected]:your-name/wp-boilerplate.git
```

## Getting started
2. Install latest version of [Node.js](https://nodejs.org/en/)

First you need to install WordPress locally, using any of the local development environment you prefer. You can use XAMPP, MAMP, WAMP, VVV, Docker or Laravel Valet. You'll also need to have [Node.js](https://nodejs.org/en/), [Composer](https://getcomposer.org/) and [WP-CLI](https://wp-cli.org/) installed.
3. Install latest version of [Composer](https://getcomposer.org/)

To start, fork this repository to your own, and then clone it
4. Install latest version of [WP-CLI](https://wp-cli.org).

```bash
git clone [email protected]:your-name/wp-boilerplate.git
```
5. Run script to setup your project and rename all files via wizard. This will make changes to theme name, description, author, text domain, package, namespace, and constants (this is important when specifying environment variable):
**Run this only once!**

If you are using VVV clone it in the `public_html` folder
```bash
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename should be done either with shell script or using node script. In order for node script to work, npm install should be ran and then npm run rename iirc. This should be added to the readme.

Copy link
Member Author

@iruzevic iruzevic Sep 2, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you run sh bin/rename.sh and that runs

npm install
npm run rename

this shell script should run on windows and osx. my idea is to run one command and you are done not 2 or more :D

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll try this out on Windows 👍

bash bin/rename.sh
```

```bash
git clone [email protected]:your-name/wp-boilerplate.git public_html
```
## Development Pre Start

Run node script to setup your project and rename all files via wizard.
**Run this first and only once**
1. After renaming your theme, run this script to setup WordPress and all necessary stuff for happy development. The script will install `npm` and `composer` dependencies and install the latest version of WordPress, and input the data for wp-config.php:

```bash
npm run rename
```
```bash
bash bin/setup.sh
```

This will make changes to theme name, description, author, text domain, package, namespace, and constants (this is important when specifying environment variable).
## Development Start

## Development Pre Start
1. Builds assets in watch/development mode using Webpack:

After renaming your theme, run this to setup WordPress on the server.
The script will install `npm` and `composer` dependencies and install the latest version of WordPress.
```bash
npm start
```

```bash
bash bin/setup.sh
```
2. Update your wp-config.php file with project specific configuration that you can tailor according to your project needs. Compare your `wp-config.php` file with this example and update accordingly:

After running setup script, you'll need to create `wp-config.php`. You can do that manually, or use WP-CLI
```php
// Must be set.
// Possible options are develop, staging and production.
define( 'INF_ENV', 'develop' );

```bash
wp config create --dbname={DBNAME} --dbuser={DBUSER} --dbpass={DBPASS}
wp core install --url={dev.boilerplate.com} --title={THEMENAME} --admin_user={ADMINUSER} --admin_email={ADMINMAIL}
wp theme activate {THEMENAME}
```
/* That's all, stop editing! Happy blogging. */

## Development Start
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');

Builds assets in watch mode using Webpack.
// Include wp config for your project.
require_once(ABSPATH . 'wp-config-project.php');

```bash
npm start
```
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');
```

## Browser sync
* Remove `define( 'WP_DEBUG', false );`. This is defined in the `wp-config-project.php` file.

We are using BrowserSync to sync assets and enable easy cross-device testing.
It is tested on MAMP and Vagrant (VVV).
* Set `INF_ENV` variable to correspond with your environment. That will add global setup for logging errors, disabling auto-update, some optimizations and it will change the color of admin so it is easier for you to know on what environment you are editing.

## Linting Assets (JS,SASS)

Lints JS and SASS using Webpack
3. You have BrowserSync to sync assets and enable easy cross-device testing. Once BrowserSync is active you will get url in the terminal. Usualy it is `localhost:3000`.

```bash
npm run precommit
```
## Liniting Files

## Linting PHP ##
1. **Linting assets** - JS and SASS using Webpack:

We are using [Infinum coding standards for WordPress](https://github.com/infinum/coding-standards-wp) to check php files.
```bash
npm run precommit
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we setup githooks here instead of manually running scripts? Githooks

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure we can add that after we test it out. lets set this for version 3.1?

```

To install it, you need to install [Composer](https://getcomposer.org/) first.
2. **Linting PHP** - We are using [Infinum coding standards for WordPress](https://github.com/infinum/coding-standards-wp) to check php files. To install it, you need to install [Composer](https://getcomposer.org/) from initial setup step.

* Add this aliases to you bash config:
3. **Linting PHP** - If you have composer installed you can add these aliases to your bash/zsh config for easier usage:

```bash
alias phpcs='vendor/bin/phpcs';
alias phpcbf='vendor/bin/phpcbf';
alias wpcs='phpcs --standard=vendor/infinum/coding-standards-wp/Infinum';
alias wpcbf='phpcbf --standard=vendor/infinum/coding-standards-wp/Infinum';
```
* Reload terminal
```bash
alias phpcs='vendor/bin/phpcs';
alias phpcbf='vendor/bin/phpcbf';
```

Checking theme for possible violations:
4. **Linting PHP** - Here are available scripts to run in your terminal to lint your PHP files:

Checking theme for possible violations:

```bash
wpcs wp-content/themes/inf_theme
```
```bash
wpcs wp-content/themes/inf_theme
```

Autofix theme for minor violations:
Autofix theme for minor violations:

```bash
wpcbf wp-content/themes/inf_theme
```
```bash
wpcbf wp-content/themes/inf_theme
```

## Build
## Goint to Production

Build creates public folder in theme all the assets.
You can do it manualy using the command from package.json but we prefere using continious integration and we have 2 scripts to help you.

Check for errors js, css, php but not WP standards
1. Run build script to build production version of assets and composer, run linting and tests:

```bash
bash bin/prebuild.sh
```
```bash
bash bin/build.sh
```

2. Run build script to build production version of assets and composer.
Builds production ready assets

```bash
bash bin/build.sh
```
```bash
bash bin/build.sh
```

3. For deployment, we are using [rsync](https://rsync.samba.org/) and [semaphoreci](https://semaphoreci.com/) in our continuous deployment setup. Whatever deployment system you are using you should never copy unnecessary data to the server. We added file `ci-exclude.txt` to exclude unnecessary folders and files on deployment.

## Import & Export

Details are located in the `README-project.md` file. Be sure to change the URL according to your project.

## Note
## Important Notes

This theme uses OOP with namespaces and autoloader. We have also included `ci-exclude.txt` file, to point what files to exclude when deploying using continuous integration.

When you add new class in your theme, be sure to run
This theme uses OOP with namespaces and autoloader. When you add new class in your theme, be sure to run this command to rebuild the composer's autoload class map. The reason why this isn't automatic is that we are folowing modified WordPress coding standards, and not PSR standards, so this has to be done manually.

```bash
composer -o dump-autoload
```

to rebuild the composer's autoload class map. The reason why this isn't automatic is that we are folowing modified WordPress coding standards, and not PSR standards, so this has to be done manually.

## Recommended plugins

Below is the list of plugins that we've used when working with this boilerplate, so we can confirm that they are working

* Content:
* Advanced Custom Fields PRO
* Category Order and Taxonomy Terms Order
* Post Duplicator
* Nested Pages
* TinyMCE Advanced
* Regenerate Thumbnails

* Develop:
* Debug Bar
* Query Monitor

* Seo:
* Yoast SEO
* ACF Content Analysis for Yoast SEO

* Optimizations:
* Autoptimize
* Nginx Helper or WP Fastest Cache
* WP-Optimize
* Redirection
* Transients Manager
* Wordfence Security

* Multilanguage:
* WPML Multilingual CMS
* WPML String Translation
* WPML Translation Management
* Advanced Custom Fields Multilingual

* Other:
* WordPress Importer
* Mailgun

## Plugin

When working for a client it may be easier to add every additional functionality to the theme. Since you are using namespaces, this contains all the necessary logic in the theme. You can use plugins of course, but be careful how you are adding extra functionality, so that you don't run in the dependency hell.
If you need to expose certain functionality across the multisite we recommend that you create a plugin.

Plugins should be created using plugin boilerplate, with addition of namespaces and autoloader.

`https://wppb.me/`
Plugins should be created using plugin boilerplate, with addition of namespaces and autoloader. We have that also prepared so please check our [Plugin Boilerplate](https://github.com/infinum/wp-boilerplate-plugin).

## Credits

Infinum WordPress Boilerplate is maintained and sponsored by
[Infinum](https://www.infinum.co).
[Infinum](https://infinum.co) and [Eightshift](https://eightshift.com).

<img src="https://infinum.co/infinum.png" width="264">

## Who do I talk to?

For questions talk to:

* [[email protected]]([email protected])
* [[email protected]]([email protected])
* [[email protected]]([email protected])

## License

Infinum WordPress Boilerplate is Copyright ©2018 Infinum. It is free software, and may be redistributed under the terms specified in the LICENSE file.
Loading