WordPress Cambridge Meetup

The WordPress Cambridge Meetup is a monthly get together for developers and users of WordPress, held at The Boathouse usually on the second, or third Monday of the month.

You can usually expect to see 2-3 talks and an open Q&A session, followed by drinks in the pub.

Find out more about WordPress, whether you’re trying to decide if you should use it, or if you’re an expert that wants to keep on top of the latest features, or anywhere in between – everyone is welcome.

So come along to see how WordPress can benefit your organisation, and get specific advise on any WordPress questions you may have.

If you’re interested in coming along, please let us know at our Meetup page.

Subscribe to our Mailing list/Google group
Follow us on Twitter
Like our Facebook page
Subscribe to us on Youtube

See you at the WPCBG Meetup!

What to shove up your .htaccess

Simon Bragg of website and design agency Sibra gave a talk on Monday about the .htaccess file. This file is found in the root directory of websites running on Apache web servers (so check what server software you are using if the htaccess is missing). It controls access to pages on the site, handles redirects and can be used for security and optimisations.

You can see Simon’s slides here:

What to shove up your htaccess presentation by Simon Bragg of Sibra
What to shove up your htaccess presentation by Simon Bragg of Sibra (click to open)

Here’s a written version of the presentation:

What to shove up your .htaccess

Simon Bragg

http://sibra.co.uk

Cambridge WordPress Meetup August 2018

The .htaccess file

.htaccess files enable:

  • Configuration changes to directory and sub-directory;
  • Without accessing httpd.conf,
  • Usually allowed;
  • Short commands:
  • key value pair.

If you screw it up syntax, you get:

Error 500 internal server error

What you can do

  • Browser caching
  • gzip compression for file transfer
  • Keep alive
  • Regex for redirects
  • Security enhancements

Browser caching

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/json "access 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresDefault "access plus 2 days"

</IfModule>

## EXPIRES CACHING ##

This can make a dramatic difference:

Speed check caching before
Speed check caching before
Speed check caching after
Speed check caching after htaccess changes

Compress transfer: gzip

Place this code AFTER WordPress stuff:

<IfModule mod_filter.c>

AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cros
Speed check gzip compression after
Speed check gzip compression after

Keep alive, if allowed by host

At end of .htaccess file

## KEEP ALIVE ##

<ifModule mod_headers.c>

Header set Connection keep-alive

</ifModule>

## END ENABLE KEEP ALIVE ##

But cheapo host doesn’t allow this.

RedirectMatch for Regex redirects

Have mod_rewrite.c enabled for #Begin WordPress stuff.

So can use Regex to redirect multiple pages in one line. Some Examples:

Perhaps for tweaking URL structure:

.* means anything, (.*) means whatever, and repeat in $1

RedirectMatch 301 .*/employment/employee-shares/(.*)
http://www.website.co.uk/employee-shares/$1

^ means start of string, (/D) means 1 non digit character.

RedirectMatch 301 ^/share(\D)options$
http://www.website.co.uk/employee-shares/

Use of OR for multiple redirects to one page:

RedirectMatch 301 ((/introducing-thepod/)
|(/products/pod/)
|(/about-us/the-vision/)
|(/cambridgepod/)) https://website.co.uk/pod/

http to https

When have http site and converting to https, add in bold

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# BEGIN WordPress
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Bits of code

1. Protect important files, deny access to them:

<FilesMatch "^.*(error_log|wp
config\.php|php.ini|\.[hH][tT][aApP].*)$">
Order deny,allow
Deny from all
</FilesMatch>

Check php.ini, is php.ini

2. Prevent directory browsing /wp-content/uploads/

Options All –Indexes

3. Block unauthorized execution of PHP files.

Most hackers upload backdoors to /uploads folder

<Directory "/var/www/wp-content/uploads/">
<Files "*.php">
Order Deny,Allow
Deny from All
</Files>
</Directory>

4. Protect against Script injections

Hackers change WordPress GLOBALS & REQUEST variables, so:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{QUERY_STRING} (<|%3C).*script.*(>|%3E) [NC,OR]
RewriteCond %{QUERY_STRING} GLOBALS(=|[|%[0-9A-Z]{0,2}) [OR]
RewriteCond %{QUERY_STRING} _REQUEST(=|[|%[0-9A-Z]{0,2})
RewriteRule ^(.*)$ index.php [F,L]

5. Secure wp-includes directory

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
</IfModule>

6. Prevent username enumeration

Visitor who enters your-site.com/?author=1 finds username. One less thing to guess. Just needs the password. So:

RewriteCond %{QUERY_STRING} author=d
RewriteRule ^ /? [L,R=301]

7. Prevent hot linking

Most hackers upload backdoors to /uploads folder

RewriteEngine On RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER}
!^http://(www\.)?your-site.com/.*$ [NC] RewriteRule \.(gif|jpg)$
http://www.your-site.com/hotlink.gif [R,L]Directory "/var/www/wpcontent/uploads/">

And replace http://www.your-site.com/hotlink.gif with image url you want to protect

xmlrpc.php blocking?

Xmlrpc : remote procedure call using XML to encode, and http for transport

Enables you to:

Post using weblog clients e.g. Windows Live Writer, IFTTT

Was a security concern, although not any more.

If want to block:

# Block WordPress xmlrpc.php requests
<Files xmlrpc.php>
order deny,allow
deny from all
allow from 123.123.123.123
</Files>

Thanks to Simon for his excellent talk!

Varying Vagrant Vagrants – What the heck? By Adam Maltpress

Adam Maltpress gave a presentation last night about Varying Vagrant Vagrants. This is an open source local development tool for developing with WordPress. You can see the presentation here:

Varying Vagrant Vagrants presentation by Adam Maltpress (click to view)
Varying Vagrant Vagrants presentation by Adam Maltpress (click to view)

A summary of the slides above follows:

Varying Vagrant Vagrants

VVV – what the heck?

  • “An open source Vagrant configuration for developing with WordPress”
  • Where Vagrant is “…a tool for building and managing virtual machine
  • environments in a single workflow”
  • Eh?
  • Run a virtual server on your computer to do WP development
  • Manage settings with a simple config file
  • Get a load of tools specific to, or helpful for, WordPress
  • https://varyingvagrantvagrants.org/

What do you get?

  • Ubuntu 14.04, nginx, PHP fpm 7.0.x, memcached, all the PHP extensions you need to run WP – hosting gubbins
  • MariaDB, PHPMyAdmin – database thingies
  • PHPUnit, ack-grep, Git, subversion, grunt, node, Composer, – and other workflow and development do-dahs
  • WordPress current version and WordPress development version as well as WP-CLI – WordPressy whatsits.
  • Everything you need to run WP on a local machine

Awesome. How do I get it?

Done all that. Now what?

Woohoo! Bring me the WordPress

  • Go to http://local.wordpress.test for current production WordPress
  • Go to http://src.wordpress-develop.test for the development branch of
  • WordPress (not yet Gutenbergy)
  • Add your own sites by editing the file vvv-custom.yml in the main VVV folder:
  • See https://varyingvagrantvagrants.org/docs/en-US/adding-a-new-site/
  • Be careful with tabs and spaces in yml files – tabs bad, spaces good
  • Edit the files the normal way on your local machine
  • Use PHPMyAdmin as normal
  • When you change things, run
vagrant reload --provision

on the command line

So what’s it good for?

  • Contributing to WP core
  • Building a theme you’re going to release
  • Building a plugin you’re going to release
  • Quickly getting a new, fresh WP installation running
  • Learning WP-CLI
  • Quickly changing PHP version to test things

What’s it bad for?

  • Working with existing sites you’ve pulled down from a server
  • Any sites with weird/custom folder structures
  • Anything you’re moving from an existing development setup
  • Beginners
  • Speed of provisioning

What are the alternatives?

  • Wamp
  • Xampp
  • Mamp
  • Docker
  • Plain virtual box
  • Actual server

Do you recommend it then?

  • Not really.

Questions?

Local Development and Child Themes

Ben Attenborough and Zuzana Kunckova gave a presentation last night on Local Development and Child Themes. Here are the slides (click to open):

Local Development and Child Themes presentation, click to open
Click to open

Local Development

Here are some resources to help you with local development:

Good blog post from wpmudev: https://premium.wpmudev.org/blog/how-to-use-local-by-flywheel-for-quick-wordpress-development/

Local development software:

Feel free to suggest alternatives!

Child themes

First checkout the official WordPress Codex documentation on child themes.

Also checkout:

The plugin we used to do create child themes automatically was Child Theme Configurator bLilaea Media

Starter themes

Here’s a list of well-known starter themes:

Wrapping up

If anyone has any questions or suggestions feel free to say!

Writing for the Web with Simon Bragg

Simon Bragg from Sibra gave a presentation last night on Writing for the Web.

Once again the presentation was very insightful and prompted lots of debate. Thanks Simon!

You can see the presentation by clicking on the image below:

Writing for the Web presentation by Simon Bragg

How to Drive Traffic to your Website with Penni Stanton

Penni Stanton (@kabocreative) from Kabo Creative gave a presentation on “How to drive traffic to your website”.

With an estimated 140,000 new websites launched every day, you need a long term plan to drive consistent website traffic. Penni gave her top tips for driving consistent traffic, including:

  • Contact forms & conversion measurement
  • On-site SEO
  • Being helpful on social media
  • Blogging for your customers’ pain points

It was a very interesting talk which prompted lots of conversations both during and afterwards. Thanks Penni!

You can see the presentation by clicking on the image below:

Practical WordPress Security with Tim Nash

Tim Nash (@tnash) from 34SP joined us on Monday 14 May to share his knowledge of WordPress security.

Tim Nash

You can see slides from Tim’s recent talks on security here

Tim’s said:

Thanks folks who came to my Practical Security talk at WP Cambridge last night.

Today it’s time to take action we covered a lot of stuff so where to start?

Here are 3 things to do right now.

1. DONT PANIC
2. Remove all admin roles and replace with editors
3. test your backups

 

The Gutenberg Block What I Wrote

Lightening talk given by me (Ben Attenborough) at the WordPress Cambridge meeting on 14 May 2018. Slides below:

Click on image to open pdf

Links:

Code on github:

https://github.com/BenAttenborough/rba-codeblock

Zac Gordon’s Gutenberg course:

https://gutenberg.courses/development/

Code Mirror

http://codemirror.net/2/

See also:

https://codemirror.net/

Gutenberg Code Editor component

https://github.com/WordPress/gutenberg/tree/master/components/code-editor

Resources for building accessible websites using WP

The resources below accompany the talk on accessible website design, from both user and developer perspectives, given by Zuzana Kunckova and Elisabeth Klaar at the March 2018 meeting of Cambridge WordPress Meetup.

Reasons for making your site accessible to everyone

Disability affects 1 in 5 of the UK population – that’s 12.9 million people who will find it easier to be your customers or site user if your site is accessible to them. An infographic from A Bright Clear Web gives further facts and figures to motivate you to make your site accessible. Fully referenced at the bottom of the page.

Also worth reading is Zuzana Kunckova’s medium article ‘Is your website accessible? If not you may be losing money!’

You can also learn more about the Social Model of Disability on Wikipedia.

Design principles

The W3C Web Accessibility Initiative’s guide to Accessible Design Principles will get you up to speed on the key principles (make your site Perceivable, Operable, Understandable and Robust) of accessible design.

Accessibility tips for beginners/users/non-coders

WPBeginner has a useful introductory article giving ‘non-coder’ tips for improving accessibility

The WP Accessiblity Plug-in developed by Joe Dolson is also an excellent way to configure your site if you are concerned it’s not accessible but you don’t want to change themes.

Adding images, text and video

A Bright Clear Web has an excellent ‘how to’ blog piece on adding alt text to images in the right way.

Foxland’s article on accessible content covers all bases from a user perspective – headings, video, images and more.

The UK Government has produced some fantastic posters about accessibility and website design, indicating the various ways the users with different impairments can benefit from tweaks in use of colour, in particular.

There are particular considerations for sharing information with people who have a learning difficulty, and the technique of Easy Read has been developed to help with this.

Accessibility for developers

The W3C guidelines for accessibility are a key resource

The WordPress Accessibility Handbook

There are also many articles on WebAIM going into detail about many aspects of accessibility, including intros/guidelines for key areas.

WAI-ARIA guidelines: https://www.w3.org/TR/wai-aria-1.1/

Tools for assessing accessibility

HTML validator – https://validator.w3.org/ Chrome/Firefox Developer tools aXe Firefox and Chrome browsers extention WAVE – accessibility checker https://wave.webaim.org/ (also a chrome extension) Readibility checker – https://www.webpagefx.com/tools/read-able/ Contrast ration checker – http://leaverou.github.io/contrast-ratio/ Accessibility checklist – https://github.com/Heydon/inclusive-design-checklist

Courses, for if you want to take it further

Udacity course on Accessible website design (general)

https://github.com/mgifford/a11y-courses (general)

WordPress: Accessibility on Lynda (WordPress specific)

People/groups to follow on twitter or on their blogs

The following people tweet or blog regularly about issues concerning accessibility and WordPress:

Joe Dolson   @joedolson

Claire Brotherton  @abrightclearweb

Graham Armfield  @coolfields

Adrian Roselli   @aardrian

Sami Keijonen  @samikeijonen

Rian Rietveld    @rianrietveld

WordPress.tv

And don’t forget to check out the useful and interesting videos on WordPress.tv, in particular those exploring issues to do with accessibility. Typcially, these are videos of talks given at WordCamps around the world and are a useful resource for learning about many aspects of WordPress.

Useful WordPress Courses

Here are some useful WordPress courses. Do you have any others you’d like to add? Let us know!

General WP Courses

WPShout – described as “In-Depth WordPress Tutorials for Developers”

Free Code Camp (free, natch) – Very accessible and of course free, so if you don’t get on with it you don’t lose anything. I don’t think there is a lot of WordPress conent (feel free to correct me on this!) But it does have a tonne of JS and React stuff

WP101 – Described as Easy WordPress video tutorials for beginners. I’ve heard this is the go to place for beginners. Haven’t tried it myself though

Press Ups – A more personal way to learn WP? (Again I haven’t tried it). Looks like lots of short free WordPress screencasts

KnowTheCode (paid) – A huge resource of videos for developers, including a selection of free ones. I found the delivery style of the videos a bit difficult. But it’s probably the most comprehensive resource out there. Learn how to build themes and plugins “the right way”. Learn local development as well. Seemed to have a bit of a bias towards building sites using the Genesis theme as a framework.

Gutenberg courses

Gutenberg Development Courses (online, paid for) featuring instructors Zac Gordon and Joe Casabona. Joe teaches users about how do use the new Gutenberg interface and Zac teaches developers how to develop for Gutenberg, including how to upgrade an older site to be compatible with Gutenberg.

The course will cost you $79 (about £55) but there is a discount for ($49) if you use the discount code earlyadopter (see WP Tavern)

I’ve done courses with Zac before and found them very friendly and useful.

Creatorcourses – Another Gutenberg specific course. One of our members has enrolled so should have some feedback soon. There’s also a discount via the Gutenberg Courses above.

CSS / Design courses

Wes Bos has announce a new CSS Grid course (online, paid for) . If you’re new to CSS Grid or want to know more, check it out.

Learn JS Deeply courses

This is more of an aside than a course suggestion. The future of WordPress development is going to require a deep understanding of JavaScript include the new stuff in ES2015/16/18 and the use of frameworks like React.

Matt Mullenweg goes into some detail about why learning JS deeply will be important for developers in this video:

So, does anyone have any good suggestions for how to learn JS deeply?

I’ve been doing the Advanced Web Developer Bootcamp (online, paid for) on Udemy, which isn’t WordPress specific but does have an excellent section on the latest JS (ES2015 / 16 / 17) and a section on React (you need to know the latest JS to develop for react because it makes heavy use of modern JS features).

Videos

Jakson – Short YouTube videos that tackle many aspects of WordPress development.

Here’s a taster:

24 resources for learning WordPress

Here’s a timely article from regular speaker and co-organiser of the WordPress Cambridge Meetup group, Steven Watts of Newt Labs on some of the best resources for learning WordPress. Includes a selection of some of the best WordPress courses, blogs and Youtube channels for 2018.

Summing up

If you have any course suggestions for wither users or developers? Let us know!