WordPress for Kids

On By In Uncategorized

How to simplify and secure a WordPress installation for kid’s use?

This guide focuses on privacy, security and ease of use. Thus secure access is enforced, a login is required and some UI sugar will be set up. Here are some steps to follow, with detailed instructions below:

  • Enforce HTTPS
  • Use WordPress privately, with required login
  • Disable commenting
  • Customize the login page for better recognition

Installation & Configuration

    1. Install it using your preferred way
    2. Create an admin user for you and a kid’s account (with the author role). If you like, also create viewer accounts for read-only access.
    3. Enforce HTTPS and use HSTS
      Create a .htaccess file in the root folder with the following content:
 
# Redirect to HTTPS 
RewriteEngine On 
RewriteCond %{HTTPS} =off 
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [QSA,L,R=301] 

# enable HSTS 
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

Install Plugins

  1. Use the Force Login plugin, to restrict usage only to registered users. This will also immediately load the edit mode once your kid has logged in.
  2. Make sure, the Loginizer plugin is installed and activated. It has a harsh retry limit and is a very effective means of keeping bad guys out.
  3. Use the Login customizer plugin, to create a pleasant login screen for your kid.

Commenting Config

In Settings/Discussion

  • Uncheck “Allow people to post comments on new articles”

Just in case you once allow discussion on a specific post:

  • Check “

Tweaking the UI

  • Update the theme: TWENTY SEVENTEEN is a nice theme (currently the default). Use a nice header image in the theme, showing something the kid likes (but probably not a closeup image of themselves)

Tweak the login screen

  • To make your kid feel at home, even at the login screen, use an image there too. Unfortunately you can not just add CSS in the default customization editor to tweak the login screen.
  • However, by using the Login customizer plugin:
    Go to Appearance/Customize, then Login Customizer (new from the installed plugin), then Other/Custom CSS to fully tweak the style. However, you can also just use the CSS below (replace the image URL):
/* This CSS changes the default WordPress login page
 * It uses a custom image as faded background and tweaks the
 * other UI stuff accordingly */

/* use an image from the gallery */
body.login {
    background-image: url(https://yourdomain.tld/wp-content/uploads/2018/03/x.jpg);
    display: block;
    background-size: cover;
}

/* fade the image to black and keep behind the login form */
body.login::after {
    content: "";
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Image behind the login form */
    z-index: -1;
}

/* make the links more readable, by using a white background, as the rest of the login form, in front of the blackish image */
/*body.login div#login,*/
body.login p#backtoblog,
body.login p#nav {
    background-color: white;
}

/* keep the links visually attached to the form */
body.login p#nav,
body.login p#backtoblog {
    margin-top: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.login p#backtoblog {
    padding-bottom: 24px;
}

/* keep the wordpress logo decolorized to not infer with image colors */
body.login #login > h1 > a {
    filter: grayscale(100%) brightness(250%); 
}

Happy blogging!

WordPress and all plugins mentioned are free (or freemium), so consider donating to the respective authors.