Per Søderlind https://soderlind.no I code for fun Tue, 20 Jun 2017 09:49:32 +0000 en-US hourly 1 https://wordpress.org/?v=4.8 https://soderlind.no/wp-content/uploads/http://res.cloudinary.com/soderlind/image/upload/v1417443389/cropped-icon-256x256_booehc-32x32.jpg Per Søderlind https://soderlind.no 32 32 My plugins are tested and found compatible with WordPress 4.7 https://soderlind.no/plugins-tested-found-compatible-wordpress-4-7/ https://soderlind.no/plugins-tested-found-compatible-wordpress-4-7/#respond Mon, 12 Dec 2016 22:19:24 +0000 https://soderlind.no/?p=5076 Plugin  Travis CI  Code Climate CSS Flags library Date and Time Picker field Debug Bar List Script & Style Dependencies delicious tagroll shortcode Google Tag Manager Multisite Admin lorem shortcode Metro Share Social Fonts My Permalink Demo Read Offline Remove the “Comments are closed” WP Anchor Header WP-DenyHost WP Link To Playlist Item  

The post My plugins are tested and found compatible with WordPress 4.7 appeared first on Per Søderlind.

]]>

Plugin  Travis CI  Code Climate
CSS Flags library
Date and Time Picker field
Debug Bar List Script & Style Dependencies
delicious tagroll shortcode
Google Tag Manager Multisite Admin
lorem shortcode
Metro Share Social Fonts
My Permalink Demo
Read Offline
Remove the “Comments are closed”
WP Anchor Header
WP-DenyHost
WP Link To Playlist Item

 

The post My plugins are tested and found compatible with WordPress 4.7 appeared first on Per Søderlind.

]]>
https://soderlind.no/plugins-tested-found-compatible-wordpress-4-7/feed/ 0
An SVG logo Custom Control for the WordPress Customizer https://soderlind.no/a-svg-logo-custom-control-for-wordpress-customizer/ https://soderlind.no/a-svg-logo-custom-control-for-wordpress-customizer/#comments Fri, 18 Nov 2016 15:44:52 +0000 https://soderlind.no/?p=5037 Another proof of concept. The custom control You create a custom control by extending the WP_Customize_Control class. I check for WP_Customizer_Control existence before adding custom control because WP_Customize_Control is loaded on customizer page only. View the code on Gist. list_svg() Create a option list with URLs to SVG files. The SVG files are defined in svg.json […]

The post An SVG logo Custom Control for the WordPress Customizer appeared first on Per Søderlind.

]]>
svg-logo

Another proof of concept.

The custom control

You create a custom control by extending the WP_Customize_Control class. I check for WP_Customizer_Control existence before adding custom control because WP_Customize_Control is loaded on customizer page only.

View the code on Gist.

list_svg()

Create a option list with URLs to SVG files. The SVG files are defined in svg.json

You should only add SVG’s that you created or at least trust the content of.

That’s the reason I’m not using the media manager to add the SVG,  they are very unsecure.

View the code on Gist.

svg.json

The svg.json file has the relative path to each logo

View the code on Gist.

The Image Picker jQuery plugin

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.

 

Worth noting here is the $("#selected_svg").change();, it triggers Save & Publish in the customizer.

View the code on Gist.

Adding the custom control to the customizer

View the code on Gist.

Answering the postmessage

Using postmessage, I’m updating the SVG URL in the preview using the JavaSript below. ‘svg_logo_url’ is the name of the setting, as added by the $wp_customize->add_setting call above.

View the code on Gist.

 

Adding the SVG logo to the theme

Most modern themes are using the_custom_logo() function to display the logo, so here I hook into the function through get_custom_logo filter to change it.

View the code on Gist.

Demo

I’ve added the custom control to the 2016-customizer-demo theme. The files used are `functions.php`, `svg.json`, `svg/*.svg`, `js/customizer.js` and image picker plugin in the `js/image-picker` folder.

The post An SVG logo Custom Control for the WordPress Customizer appeared first on Per Søderlind.

]]>
https://soderlind.no/a-svg-logo-custom-control-for-wordpress-customizer/feed/ 2
WP Gears and the Heartbeat API https://soderlind.no/wp-gears-heartbeat-api/ https://soderlind.no/wp-gears-heartbeat-api/#respond Fri, 11 Nov 2016 23:32:53 +0000 https://soderlind.no/?p=5034 Testing WP Gears and the Heartbeat API, WP Gears is at https://github.com/10up/WP-Gears. NOTE: this plugin is run continuously, triggered by ‘plugins_loaded’, you should use an event triggered by the user (onclick, onhover etc)) View the code on Gist.

The post WP Gears and the Heartbeat API appeared first on Per Søderlind.

]]>
Testing WP Gears and the Heartbeat API, WP Gears is at https://github.com/10up/WP-Gears. NOTE: this plugin is run continuously, triggered by ‘plugins_loaded’, you should use an event triggered by the user (onclick, onhover etc))

View the code on Gist.

The post WP Gears and the Heartbeat API appeared first on Per Søderlind.

]]>
https://soderlind.no/wp-gears-heartbeat-api/feed/ 0
WordPress linting using Code Climate, the Swiss Army knife of code linting https://soderlind.no/using-code-climate-wordpress-installing-using-code-climate/ https://soderlind.no/using-code-climate-wordpress-installing-using-code-climate/#comments Mon, 10 Oct 2016 17:47:37 +0000 http://soderlind.no/?p=4818   tl;dr –  Code Climate is a very easy to implement linter for PHP, JavaScript, CSS etc. [A linter] find code that doesn’t correspond to certain style guidelines source: Wikipedia When I upgraded my plugins to support WordPress 4.6, I decided that I wanted to follow the WordPress Coding Standards. I could have installed PHP […]

The post WordPress linting using Code Climate, the Swiss Army knife of code linting appeared first on Per Søderlind.

]]>
 

codeclimate-wordpress

tl;dr –  Code Climate is a very easy to implement linter for PHP, JavaScript, CSS etc.

[A linter] find code that doesn’t correspond to certain style guidelines

source: Wikipedia

When I upgraded my plugins to support WordPress 4.6, I decided that I wanted to follow the WordPress Coding Standards. I could have installed PHP CodeSniffer + the WordPress Coding Standards add-on, ES Lint, CSSlint etc, but why do that when I get it all from Code Climate ? Code Climate includes more than 30 different code analysis engines.

Prerequisite

I’m on a Mac, so I already had:

If you’re not on a Mac, please see the Code Climate CLI README.

Installation

brew tap codeclimate/formulae
brew install codeclimate

That’s it :)

Setup

Go to your projectfolder and create the Code Climate config file  –  .codeclimate.yml

cd PROJECTFOLDER
codeclimate init
codeclimate engines:install

`codeclimate init` will scan the files and folders in `PROJECTFOLDER` and create a `.codeclimate.yml` with engines suitable for your project.

If you have a `.codeclimate.yml` file in your project folder, do:

cd PROJECTFOLDER
codeclimate engines:install

`codeclimate engines:install` will install all the engines (linters) defined in `.codeclimate.yml`

WordPress

The PHP Codesniffer in Code Climate supports the following code standards:

WordPress — complete set with all of the sniffs in the project

  • WordPress-Core — main ruleset for WordPress core coding standards
  • WordPress-Docs — additional ruleset for inline documentation
  • WordPress-Extra — extended ruleset for optional best practices sniffs
    • includes WordPress-Core
  • WordPress-VIP — extended ruleset for WordPress VIP coding requirements
    • includes WordPress-Core

Add the one you’d like to use to your `.codeclimate.yml` file:

  phpcodesniffer:
    enabled: true
    config:
      standard: "WordPress-Core"

You can add multiple standards:

  phpcodesniffer:
    enabled: true
    config:
      standard: "WordPress-Core, WordPress-Docs"

See my complete `.codeclimate.yml` file at the end of this article.

Use

From the command line

In the PROJECTFOLDER, run codeclimate analyze. Code Climate will list the issues it finds, eg:

Starting analysis
Running duplication: Done!
Running eslint: Done!
Running fixme: Done!
Running phpcodesniffer: Done!

== plugin-customizer.php (2 issues) ==
192: No space after opening parenthesis is prohibited [phpcodesniffer]
192: Expected 1 spaces between opening bracket and argument "$wp_query"; 0 found [phpcodesniffer]

Analysis complete! Found 2 issues.

From inside your code editor

I’m using Atom, and Code Climate integrates well with the Atom linter plugin.

If you haven’t, install the add-ons using the atom package manager:

apm install linter
apm install linter-codeclimate

In Atom, the Code Climate linter will be triggered when you save the file.

codeclimate-issue

There’s also a vim plugin.

Bonus

If your project is an open source project, you can add it for free to codeclimate.com. Here’s my plugin customizer.

.codeclimate.yml

Here’s the config file I use for most of my projects:

View the code on Gist.

The post WordPress linting using Code Climate, the Swiss Army knife of code linting appeared first on Per Søderlind.

]]>
https://soderlind.no/using-code-climate-wordpress-installing-using-code-climate/feed/ 4
WordPress Customizer Demo: In Twenty Sixteen, toggle post meta on or off https://soderlind.no/wordpress-customizer-demo-in-twenty-sixteen-toggle-post-meta-on-or-off/ https://soderlind.no/wordpress-customizer-demo-in-twenty-sixteen-toggle-post-meta-on-or-off/#respond Wed, 05 Oct 2016 20:31:24 +0000 http://soderlind.no/?p=4966 Purpose of this demo is to demonstrate, for the theme developer, how to use the customizer postmessage transport and a preview script to toggle complex theme elements on or off. In this demo I’ll toggle displaying the author and post date. Theme code: View the code on Gist. When the post meta is toggled off, […]

The post WordPress Customizer Demo: In Twenty Sixteen, toggle post meta on or off appeared first on Per Søderlind.

]]>
customizer-post-meta

Purpose of this demo is to demonstrate, for the theme developer, how to use the customizer postmessage transport and a preview script to toggle complex theme elements on or off.

In this demo I’ll toggle displaying the author and post date.

Theme code:

View the code on Gist.

When the post meta is toggled off, the theme will create an post meta wrapper without the post meta html, and the preview script doesn’t have anything to toggle:

View the code on Gist.

I solve this by adding the missing html using jQuery.prependTo(). The html is just for the preview and will not be added to the theme:

View the code on Gist.

View the code on Gist.

You’ll find a complete demo at GitHub

The post WordPress Customizer Demo: In Twenty Sixteen, toggle post meta on or off appeared first on Per Søderlind.

]]>
https://soderlind.no/wordpress-customizer-demo-in-twenty-sixteen-toggle-post-meta-on-or-off/feed/ 0
Plugin Customizer: Ad WordPress customizer to a plugin https://soderlind.no/plugin-customizer/ https://soderlind.no/plugin-customizer/#comments Wed, 28 Sep 2016 20:16:29 +0000 http://soderlind.no/?p=4908 tl;dr –  The commented demo plugin is available at GitHub. Introduction I’ve wanted to add a customizer to my Read Offline plugin for a long time, letting the user easily change the PDF and ePub design. As I like to write a demo plugin before adding new functionality, here’s my take on adding WordPress customizer to a plugin. Understanding […]

The post Plugin Customizer: Ad WordPress customizer to a plugin appeared first on Per Søderlind.

]]>
Plugin Customizer

tl;dr –  The commented demo plugin is available at GitHub.

Introduction

I’ve wanted to add a customizer to my Read Offline plugin for a long time, letting the user easily change the PDF and ePub design. As I like to write a demo plugin before adding new functionality, here’s my take on adding WordPress customizer to a plugin.

Understanding how the customizer works wasn’t easy.

Understanding how the customizer works wasn’t easy. I’ve read the documentation and read a lot of source code. After viewing the loopconf presentation Patrick Rauland held last year, I asked him and got an early beta version of the WooCommerce Email Customizer plugin. I’ve also followed the work Weston Ruter and XWP have done and have skimmed through their customizer plugins, I’ve also viewed tickets and followed the discussions on Slack.

The thing I found hardest was understanding how to remove the other sections from the customizer, so I asked on Twitter

Fortunately, Weston came to the rescue :)

The important parts

Timing is everything.

Timing is everything, and so is understanding when parts of the code is used. WordPress customizer relies on ajax for communication between the controls and the preview, and customizer uses ajax for saving settings.

“Blank Slate” loads at a priority of 1, so the Plugin Customizer must load after it, but if it’s loaded at the default priority of 10, it will not be available. As shown below, I add the customizer_register  at priority 9.

View the code on Gist.

View the code on Gist.

So, everything looked fine, but I couldn’t save the settings (!!), and the only error message I got was a 500 Server error. I understood that when saving & publishing the customizer settings, admin-ajax.php expects to find the settings, and if I removed the bailout test everything worked fine.

The problem was that I couldn’t “see” the solution. When I removed the bailout test, Plugin Customizer sections would pop up in the default Appearance -> Customize, and if I added the bailout test, I couldn’t save the settings.

Now, after the problem is solved, it’s a simple fix (isn’t it always). Register the customizer settings before the bailout test and register the customizer sections and controls after the bailout test.

View the code on Gist.

Adding a preview

Weston describes how to add a preview in Navigating to a URL in the Customizer Preview when a Section is Expanded. I’ve extended his code to add a template per section.

View the code on Gist.

Loading the template, I tested the hooks template_redirect and template_include, but I ended up creating a permalink. It fitted well to script above.

View the code on Gist.

Like to learn how to create a custom permalink? I’ve written another demo plugin that shows you how to do it.

Code

The Plugin Customizer demo plugin is available at GitHub. The code is documented. If you find logical flaws, typos etc, please contribute.

Credits

I couldn’t, at least not in the near future, have developed this plugin without the help from Patrick Rauland and Weston Ruter.

Btw, any flaws in the plugin are mine.

 

The post Plugin Customizer: Ad WordPress customizer to a plugin appeared first on Per Søderlind.

]]>
https://soderlind.no/plugin-customizer/feed/ 2
101: How to fetch a git pull request https://soderlind.no/test-a-git-pull-request-locally-before-you-merge-it/ https://soderlind.no/test-a-git-pull-request-locally-before-you-merge-it/#respond Wed, 14 Sep 2016 23:51:46 +0000 http://soderlind.no/?p=4887   You should test pull requests locally before you merge them with your code. Fetching a pull request from a remote repository is simple, just do: In your local project folder, do: git ls-remote You’ll get a list like this: From https://github.com/soderlind/myproject.git 15438eca8b7f62f371985823fe6fa8c60d7a3b50 HEAD 15438eca8b7f62f371985823fe6fa8c60d7a3b50 refs/heads/master 4abd4e393cc1bc57af576a67a1a56b3dae6ecabd refs/pull/2/head e05af83eeebb01e52d8b42f24c570c8290e0b351 refs/pull/4/head Find the pull request in […]

The post 101: How to fetch a git pull request appeared first on Per Søderlind.

]]>
 

git-pull-request-twitter

You should test pull requests locally before you merge them with your code. Fetching a pull request from a remote repository is simple, just do:

  1. In your local project folder, do: git ls-remote
    You’ll get a list like this:
    From https://github.com/soderlind/myproject.git
    15438eca8b7f62f371985823fe6fa8c60d7a3b50 HEAD
    15438eca8b7f62f371985823fe6fa8c60d7a3b50 refs/heads/master
    4abd4e393cc1bc57af576a67a1a56b3dae6ecabd refs/pull/2/head
    e05af83eeebb01e52d8b42f24c570c8290e0b351 refs/pull/4/head
  2. Find the pull request in the list above, and fetch it, eg:
    git fetch origin refs/pull/4/head
  3. Temporarly checkout the pull request: git checkout FETCH_HEAD
  4. Test the code
  5. Return to the master: git checkout master
  6. If everything is fine, you can now merge the pull request in the remote repository and pull it down to your local project: git pull

The post 101: How to fetch a git pull request appeared first on Per Søderlind.

]]>
https://soderlind.no/test-a-git-pull-request-locally-before-you-merge-it/feed/ 0
My WordPress plugins are ready for 4.6 https://soderlind.no/wordpress-plugins-ready-4-6/ https://soderlind.no/wordpress-plugins-ready-4-6/#respond Thu, 28 Jul 2016 23:57:39 +0000 http://soderlind.no/?p=4831 Tested & found compatible with WordPress 4.6. My plugins are following the WordPress Coding Standards. Plugin  Travis CI  Code Climate CSS Flags library Date and Time Picker field Debug Bar List Script & Style Dependencies delicious tagroll shortcode Google Tag Manager Multisite Admin lorem shortcode Metro Share Social Fonts My Permalink Demo Read Offline Remove the […]

The post My WordPress plugins are ready for 4.6 appeared first on Per Søderlind.

]]>
Tested & found compatible with WordPress 4.6. My plugins are following the WordPress Coding Standards.

Plugin  Travis CI  Code Climate
CSS Flags library
Date and Time Picker field
Debug Bar List Script & Style Dependencies
delicious tagroll shortcode
Google Tag Manager Multisite Admin
lorem shortcode
Metro Share Social Fonts
My Permalink Demo
Read Offline
Remove the “Comments are closed”
WP Anchor Header
WP-DenyHost
WP Link To Playlist Item

 

The post My WordPress plugins are ready for 4.6 appeared first on Per Søderlind.

]]>
https://soderlind.no/wordpress-plugins-ready-4-6/feed/ 0
On your Mac, use Larvel Valet for local WordPress and PHP development https://soderlind.no/tldr-on-your-mac-use-larvel-valet-for-local-wordpress-and-php-development/ https://soderlind.no/tldr-on-your-mac-use-larvel-valet-for-local-wordpress-and-php-development/#comments Mon, 09 May 2016 14:00:34 +0000 http://soderlind.no/?p=4776 You need Homebrew `brew install php70` `brew install mariadb` (server=127.0.0.1, username=root and password=an empty string) `brew install composer` `brew install wp-cli` `composer global require laravel/valet` Add ~/.composer/vendor/bin to PATH `valet install` `mkdir ~/Sites` `cd ~/Sites` `valet park` `mkdir ~/Sites/wp-valet` `cd ~/Sites/wp-valet` `wp core download` http://wp-valet.dev BONUS: Share your local site using `cd ~/Sites/wp-valet && valet […]

The post On your Mac, use Larvel Valet for local WordPress and PHP development appeared first on Per Søderlind.

]]>
sunchair

Photo by Richard Walker

  1. You need Homebrew
  2. `brew install php70`
  3. `brew install mariadb` (server=127.0.0.1, username=root and password=an empty string)
  4. `brew install composer`
  5. `brew install wp-cli`
  6. `composer global require laravel/valet`
  7. Add ~/.composer/vendor/bin to PATH
  8. `valet install`
  9. `mkdir ~/Sites`
  10. `cd ~/Sites`
  11. `valet park`
  12. `mkdir ~/Sites/wp-valet`
  13. `cd ~/Sites/wp-valet`
  14. `wp core download`
  15. http://wp-valet.dev
  16. BONUS: Share your local site using `cd ~/Sites/wp-valet && valet share`

You can learn a lot more at:

Btw, for more complex projects I use VVV

The post On your Mac, use Larvel Valet for local WordPress and PHP development appeared first on Per Søderlind.

]]>
https://soderlind.no/tldr-on-your-mac-use-larvel-valet-for-local-wordpress-and-php-development/feed/ 2
Spring Cleaning 2016 https://soderlind.no/spring-cleaning-2016/ https://soderlind.no/spring-cleaning-2016/#respond Sat, 16 Apr 2016 23:34:36 +0000 http://soderlind.no/?p=4763 WordPress 4.5 is out and my plugins needs some dusting. I will upgrade most of my plugins. I will update this page as it happens. Plugin  Tested with WP 4.5 CSS Flags library Date and Time Picker field Debug Bar List Script & Style Dependencies delicious tagroll shortcode Google Tag Manager Multisite Admin lorem shortcode […]

The post Spring Cleaning 2016 appeared first on Per Søderlind.

]]>

WordPress 4.5 is out and my plugins needs some dusting. I will upgrade most of my plugins. I will update this page as it happens.

Plugin  Tested with WP 4.5
CSS Flags library
Date and Time Picker field
Debug Bar List Script & Style Dependencies
delicious tagroll shortcode
Google Tag Manager Multisite Admin
lorem shortcode
MemCachier EOL
My Permalink Demo
PerS Fade Away WordPress Admin Bar  EOL
Read Offline
Remove the “Comments are closed”
SimpleModal Janrain Engage  EOL
WebPutty Helper  EOL
WP Anchor Header
WP-DenyHost
WP Live Preview Links  EOL
 EOL: Sorry, but some have to go (the plugin is discontinued). The plugin is still available in my GitHub repository

 

The post Spring Cleaning 2016 appeared first on Per Søderlind.

]]>
https://soderlind.no/spring-cleaning-2016/feed/ 0