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

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!

Next Meetup: Gutenberg: Learn the Future of WordPress 12-02-2018

The word "Gutenberg" in metal moveable type

Getting to know Gutenberg – Monday 12 February 2018 6.45pm to 9.45pm, The Bradfield Centre, Central Working, Cambridge

See: Meetup for up to date details

Gutenberg is the name for the new editor focus in WordPress. It is the future of WordPress, and will make creating websites much, much simpler. Tammie Lister will take you through a rough guide to the project. How it began and why it’s needed. Then, she will show you where the project is currently at and finally how you can also get involved. Join her and get to know Gutenberg.

Tammie Lister
Tammie works at Automattic, the company behind WordPress.com as an experience designer. She has a varied background including psychology, design, front end development and user experience. She is a contributor to WordPress and is currently the design lead for Gutenberg.

In other words Tammie is a leading UK expert on Gutenberg. We are hugely honoured she has made the time to present Gutenberg to us. Our meetup group website: https://wpcbg.uk/ with old presentations. Thanks Steve.

Thank you to TwinDots our sponsors

This meeting is sponsored by Twin Dots, the leading branding, design and development agency in Newmarket. Twin Dots has clients like Cambridge Marketing College, 450 GSM, Racing Welfare, and Devam the jewellers.

The usual format:

18:45: Roll up for a couple of beers in the foyer, & chat, mingle etc.

19:15 start: Everyone introduces themselves: 20 seconds max, mainly describing their involvement with WordPress.

2. Up to 4 * 3 minute pitches. Share discoveries, useful tips, requests for help with charitable projects. 3: WordPress News with our star reporter Ben Attenborough.

4. Main presentation Tammie Lister, Gutenberg

5. Clinic: Bring along a problem, and the audience will offer advice. If we can’t, maybe we’ll have a solution by next meeting. Kinda aiming to finish the formal part by about 21:00, depending on everyone’s enthusiasm to chat & discuss.

6. Beer & networking: We should leave by about 21:45 at the latest.