Category: Wordpress

Sage Installation – Update for version 9

TheSmithy

  • Update: 4-12-2018

For older versions of Sage see this post

https://github.com/roots/sage

https://roots.io/sage/docs

Changes in Sage 9

  • Laravel’s Blade as a templating engine.
    Learn about Blade. Check out the templates directory.

    You can opt-out of Blade templates by replacing them with regular PHP ones (you could copy over the templates from Sage 8 if you really wanted to).

  • Replaced gulp and Bower with Webpack and npm.
    Bower is dead and all packages should be available on npm.

    Webpack is responsible for:

    • Compiling assets
      • Sass to css with ccsnano
      • ES6 to JavaScript that can be run in today’s browsers with buble
    • Optimizing images with optipng, gifsicle, pngquant, and svgo
  • ES6 for Javascript
    Great resource for learning about ES6: Wes Bos’ ES6 for Everyone
    Convert existing JS to ES6 with Lebab
  • Bootstrap 4
    It’s still in alpha, but there’s so many improvements over Bootstrap 3.
  • PSR-2 coding standards.
    Roots projects switched to PSR-2 last year. Previously we had used a modified PSR-2 ruleset, but we stopped caring about 2-spaces in our PHP files and fully adopted PSR-2.
  • Restructured theme files.
    All theme templates are finally out of the theme root! Our implementation is a little hacky because a 7 year old WordPress Trac ticket still hasn’t landed, but we believe our implementation is the best we can do at this time.
  • Introduced Yarn.
    Yarn is a drop in npm client replacement. With Yarn, the installation of Node dependencies is quicker & the node_modules directory is smaller.

Theme Installation

  1. Make sure all dependencies have been installed before moving on:
    PHP >= 5.6.4 7.1.3 (with php-mbstring enabled)
    – Add the wamp php (at least 7.1.3) to Windows PATH (and no other php in the path).
    – make sure extension=php_mbstring.dll is enabled in the php.ini of the php version you are using (default= enabled)
    Composer (Dependency manager)
    Node.js >= 6.9.x
    – If necessary install Node (with npm). I used the Windows installer here (x64 version)
    Yarn
  2. From your WordPress themes directory, run the following composer command: 
    composer create-project roots/sage your-theme-name dev-master

    During theme installation you will have the options to:

    – Update theme headers (theme name, description, author, etc.)
    – Select a CSS framework (Bootstrap, Foundation, none)
    – Add Font Awesome

    Update: Newest version of Sage9 (9.0.5 at the time of writing) gives the following error: 

    TTY mode is not supported on Windows platform

    Solution: run this from the theme directory

    ./vendor/bin/sage meta        # or edit style.css directly
./vendor/bin/sage config      # or edit resources/assets/config.json
./vendor/bin/sage preset      # Install css framework
  3. Navigate to the theme directory then run yarn, and yarn build (to refresh files):

    yarn && yarn build

    You now have all the necessary dependencies to run the build process.

    About dependencies:
    If you open package.json you’ll see both devDependencies and dependencies that Sage uses. devDependencies are used by the build process, whereas dependencies are packages that are used in the front-end theme assets.

    dependencies includes the front-end options you selected during install, such as Bootstrap and Font Awesome

    "dependencies": {
      "bootstrap": "^4.0.0-beta",
      "font-awesome": "~4.7",
      "jquery": "1.12.4 - 3",
      "popper.js": "~1.11"
    }

————————–

Install WordPress and activate plugins

Optionally import test data with WP Test. See here

Warning when activating i-themes Security:

When activiating this plugin, it will write to your wp-config.php.
This causes an error with the Bedrock config setup and make you website/admin unaccesible.
Solution:
– activate i-themes
– edit wp-config.php -> remove file permissions added by i-themes (we use config/application.php for that)
– WP admin should be accesible again
– Go to i-themes settings-> WordPress Tweaks -> File Editor -> uncheck the box

Read More

WP Rest API with Custom post types and / Advanced custom fields

TheSmithy

Prerequisites:

Make it work

  • Create a Custom post Type
    • Set Show in REST API to TRUE
    • enter a REST API base slug (need this for your requests)
  • Create some ACF fields for the custom post type
  • Create a Custom post
  • Test the API in Postman:
    GET    http://localhost/sitename/wp-json/wp/v2/rest-api-base-slug

    You should see a json file with acf fields

WordPress Custom colors in TinyMCE editor

TheSmithy

Source: HOW TO ADD CUSTOM COLOURS TO TINYMCE 4 IN WORDPRESS 3.9+

function my_mce4_options( $init ) {
	$default_colours = '
		"000000", "Zwart"
		';
	$custom_colours = '
		"959c51", "Groen",
		"754c24", "Bruin",
		"e89638", "Oranje",
		"5796b5", "Blauw"
		';
	$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
	$init['textcolor_rows'] = 1;
	$init['textcolor_cols'] = 5;
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Optimizing WordPress

TheSmithy

This post is meant to be a log book of optimization tricks and how they affect performance of my Roots 7.0 installation

Note: YSlow, Pagespeed etc. complained about compressing with gzip. If your server runs on Apache below 2.3.7 (as was the case with me) remove the <IfModule mod_filter.c></If> in .htacces (under Compression). That solved it for me

Configuration 1: Read More

WordPress – Localized

TheSmithy

A localized version (in this example Dutch) of WordPress is basically the same as the normal WordPress except for:

  • includes/version.php -> contains aan extra line at the end with 
    $wp_local_package = 'nl_NL';
  • The wp-content/languages folder

Basically, all you need to do is: Read More