Categories
News

My first custom block plugin

Well, my first ever plugin to be submitted to WordPress.org actually 🙂 .

Last Christmas, I added a custom, static image block with Christmas decorations to my theme Christmas Sweets. This was the first theme in the directory to include blocks for the new block editor.

Later, the Theme Review Team on WordPress.org decided that themes are not allowed to include blocks, and I removed them.

Now that WordPress 5.0 has been released, the plugin with updated blocks and a few additional images has been approved and added to the plugin directory. You can download the plugin here.

The blocks are basic and I did not need to change much of the code from last year to make them work again.

Unfortunately a lot of the documentation that is available is out of date, and I was not able to add alignment toolbars, so the images are now centered by default.

I admit that the mix of ES5/ESNext examples and tutorials that are available are confusing. (And I’m not a fan of React error messages.)

Even though I have taken Zac Gordons Block Development course, I ended up sticking with ES5 and build on the existing code instead of rebuilding the blocks.

Submitting the plugin to the directory was nothing but smooth, and it was approved after a few hours. I was able to use svn for the first time in many years to add the plugin files to the directory, so I’m happy with that :). Now I just need to add some images to market the plugin.

Categories
News

Spooky! A Halloween theme adoption

Last year, I released a Christmas theme, and I wanted to create a holiday theme this year as well.  While I was considering a name for my new theme, I found a theme in the WordPress.org theme directory called Spooky, that had not been updated since 2009.   I thought this was a great name for Halloween, and that it would be fun to see if I could revive it.

So I found the contact information to the themes creator, Esther, from webmatter.de in the themes readme file, and to my surprise, she soon replied back and said yes, I could adopt the theme!

To adopt a theme, you need to change the username of the author in the back end of the WordPress.org theme directory. So In order to do that, I contacted the Team Leads of the WordPress.org Theme Review Team who quickly transferred the theme over to my account.

When testing the original theme, I discovered a lot of PHP warnings, because of course it did not have any of the functions that have been added to WordPress in the last 9 years, that we take for granted today.

Because I only had a few days to spare before the holiday, I decide I would not be able to keep any of the original code and rewrite it, so instead, I started over with a fresh copy of underscores.

A screenshot of the original theme

But I definitely wanted to keep the theme in the same style, with the black background, grey text colors with orange details, a castle in the footer, and a moon at the top. 

I already had the moon that I could borrow from the Bunny theme, and I went through many of the Halloween themed images on pixabay before I chose this image for the footer:

I edited out the second moon behind the castle and also added some gradients to the themes footer and header area. In the end, I opted out of the sidebar so that it would be easier to use the wide and full width alignments in Gutenberg.

I tested a large number of menus with different spider animations, until I chose the narrower drop down menu with the cobwebs.

I am still struggling with getting the animations to work on Ipad, so if you have any tips, please e-mail me 🙂

For the screenshot, I choose The Raven, by Edgar Allan Poe.

The Screenshot of the new version of the theme

For 3 days of developing and testing, I am still pretty happy with how it turned out.

The downside to adopting a theme is that if the theme was already live, -as was the case for Spooky; it wont be on the latest themes list on WordPress.org.

If you want to dress up your blog for Halloween, you can download the theme here.

The theme as one menu, a footer widget area, support for full width images with the Gutenberg editor, and an orange and yellow color palette. There is also a color option in the customizer where you can replace the orange accent color.

Categories
News

Aaron is getting ready for the new editor

Two months ago,  I finally started the process of creating new demos for some of my existing themes. But after seeing very little actually being done 😉 I have realised I need a better plan for which themes I want to continue working on.

The first theme that has recieved an update in preparation for Gutenberg, and a new demo and information page, is Aaron.

While I continue the testing together with a couple of my theme users,  you can expect several smaller updates to fine tune the styling.  I want the editor and the front to match, but I still want it too look and feel like the same theme.

I am generally a fan of Gutenberg -I am writing this post on my mobile,  with the plugin installed – but the frequent changes has not made it easy for theme developers.

The following changes were made in version 3.2 of Aaron:

  • Made sure that the custom templates works for all pages, not only for the front page.
  • Made sure that the meta box options works with the Jetpack portfolio and testimonial post formats.
  • Added a testimonial widget. This widget requires the Jetpack testimonial functionality to be activated. (This widget is the same widget that has been added to some of my more recent themes)
  • Made sure that the excerpt_more filter returns the default value in the admin.
  • Included a footer link to the privacy policy page, if one is set up.
  • Minor style changes:
  • A left side border was added to the blockquote.
  • A border was removed from the footer widgets.
  • Matched font and styles used in the gutenberg editor.
  • I also updated the screenshot, to follow the new guidelines for the theme directory.

Version 3.3 is scheduled for mid october and will mostly be style changes.

If you have any suggestions and ideas for Aaron, you can email me or use the support forum.

Categories
News

GOAT

So, my latest child theme has nothing to do with goats*, but is inspired by the 2018 FIFA World Cup.
Sweden is out of the cup, but I have wanted to make a theme for SportsPress for a while and this was good opportunity to try it out. This is a basic theme, but together with the plugin you can set up team and player profiles, present upcoming games, statistics and results. If you are new to using SportsPress, they have lots of video tutorials to help you get started.

You can download GOAT from WordPress.org here.

*But if you love goats, my theme Farm has a goat header image :p .

Categories
News

Farm, a new child theme

Farm is a new child theme for Embla.
It is a basic blog theme with a romantic header font and just a hint of green.
Farm is responsive with a large header images and a two column grid layout.
Present your farm and your staff with the custom staff template, or sell your goods with the help of the WooCommerce plugin.

You can download Farm from WordPress.org.

Categories
Review

Getting ready to do accessibility reviews

The scope of this post is reviewing accessible themes submitted to WordPress.org. Updated December 6 2017.

The accessibility-ready tag has been available in the WordPress.org theme directory for over 2 years. Themes that include the tag are not set live until the theme has had a full review plus an additional accessibility review.

While most agree that accessibility is important, the number of theme reviewers who are comfortable reviewing it is still very low; no more than 4 people at any one time.

Some of the reviewers are members of the WordPress.org accessibility team and their main focus is on improving the accessibility of WordPress as a whole, and they only have limited time to help out with theme reviews.

This means that:

  • The waiting time for accessible themes are even longer than for regular themes.
  • Author’s remove the tag because the waiting time is too long.
  • Authors submit accessible themes without adding the tag, so it becomes more difficult for users to find accessible themes.

I personally believe that the low number of reviewers is because of lack of confidence: Reviewers does not want to promise that a theme is accessible if they are not 100% sure.

So how can we encourage and make it easier for active reviewers to start reviewing accessibility (and usability)?

First of all I would like to assure you that:

  • It is not more difficult to do an accessibility review than to do a regular theme review.
  • It does not take longer than a regular review.
  • You do not need to test the theme with a screen reader.
  • The members of the theme review or accessibility team can help answer your questions.
  • The world will not end if you missed something during the review*.
  • The theme author is responsible for making the theme accessible, not the reviewer.

The requirements for using the accessibility-ready tag each have a section named “How to test” and suggestions of tools to use, so I could even argue that the accessibility requirements are easier to test than some of our other requirements.

You can literally open the accessibility requirements page, read the first requirement and start testing it simply by tabbing through the selected theme. -If you can’t see the focus, then the theme needs to be updated.

But it is important to remember that as with any part of the theme review, it becomes easier and much more valuable for you as a developer if you also have a basic understanding of why something is required. 

The accessibility requirements are based on a guideline from W3C called WCAG 2.0, or Web Content Accessibility Guidelines 2.0 (I am sure that you have heard of this guideline before).

WCAG has 3 levels: A, AA, and AAA. The theme accessibility requirements mainly refer to level AA.

Even when we have a list of requirements, everything cannot be covered, and we need to use both our own judgement and our collective knowledge as a team. This is true for all kinds of reviews that we do. But in cases where the accessibility requirements does not cover everything, we don’t need to rely on trends or vague and varying “best practices”, instead, we can go back to read the WCAG.

I understand that trying to read and make sense of the official documents can feel overwhelming, and luckily for us, there are several other people who have recognized this and has written some helpful guides.

Web Content Accessibility Guidelines—for People Who Haven’t Read Them

Mozilla: Understanding the Web Content Accessibility Guidelines

How to do an assessment -From Duke University

The first thing to be aware of is that using an accessible WordPress theme does not automatically mean that a website is accessible, because the content must also be accessible. That a theme passes the review does not mean that the website is compliant with WCAG 2.0, or with the U.S section 508, which is sometimes believed.

Steps to get ready

I recommend the following steps to get ready to review accessible themes. If you need to skip a step, you can always save the resource and refer to it later.

  1. Read the WordPress accessibility coding standards.
  2. Read the Web Content Accessibility Guidelines. https://www.w3.org/TR/WCAG20/ 
  3. Visit and subscribe to the blog of the WordPress.org Accessibility team: https://make.wordpress.org/accessibility/
  4. Join the accessibility team channel on Slack (Please be respectful and remember that it is not a support channel).
  5. Read about the requirements, recommendations and review process for accessible themes.
  6. Take the WordPress accessibility course by Joe Dolson on Lynda.com. Joe is a member of the accessibility team, a plugin and theme developer and the one who has done most of the accessibility theme reviews.
  7. Sign up for A11yweekly, a newsletter by David A Kennedy. It includes a section called “New to A11y” and has a lot of good tips and links to resources.  You can also find the previous issues here. David has helped us with accessibility reviews in the past and is one of the maintainers of the default WordPress themes.
  8. Read and learn from other reviews:
    1. All open tickets with the accessibility-ready tag are in a separate queue on Trac: https://themes.trac.wordpress.org/report/9
    2. You can read old reviews by listing accessible themes in the directory and using the Trac Tickets link on the themes page.
  9. Don’t forget to test and improve your own themes! Submit a theme with the accessibility-ready tag to go through the process yourself.

I also recommend the following videos on WordPress.tv:

Adrian Roselli: Selfish Accessibility

Rian Rietveld: The Accessibility-Ready Tag for Your Theme – Why and How

Rachel Cherry : Understanding and Supporting Web Accessibility

Graham Armfield: Designing for Accessibility

 

 

*-The process in case you happen to miss something during an accessibility review is the same as for any other requirement: If we find out that a live theme does not pass a requirement, the author will be notified in ticket and we will ask them to submit an update. If the problem is not solved, we can ask the author to remove the tag, and ultimately in a worst case scenario, the theme can be suspended from the directory.

Categories
News

Christmas Sweets, A new Christmas blog theme

So I had not planned to release another theme this year.  Deejay was submitted to WordPress.org in December last year, and was only set live 6 months ago, and I didn’t think I would be able to release a second theme because of the review queue waiting times.

But when the Theme Review Team announced that they would give priority to seasonal themes like Christmas themes, I knew I could do a quick project for it and see what happens.

I love Christmas, and I had suggested to the other team leads in previous years that we should do something similar, but for different reasons it never happened until now.

-If you search for Christmas in the WordPress.org theme directory, only 3 themes will show up, so we need to change this so that the users can have a greater variety to choose from.

I first started making a child theme for my theme “White X-mas” during the contributor day at WordCamp Stockholm, and I had an idea of using candy, gingerbread and polka dots.

Because I had the opportunity to take a workshop on how to create custom Gutenberg blocks during the contributor day, I also wanted to add some simple custom blocks to my theme.

But I couldn’t get the theme “just right” and feedback from others who saw the theme during the day was not overwhelming either.

So after the WordCamp, I brought out a theme I have been working on from time to time since September. It is the theme used on this website.

I altered the colors, added the custom Gutenberg blocks and support for wide images and custom colors, and fixed a couple of more bugs for responsive views.

After that, most of time was actually spent reading Dashicon style guide and creating the custom icons in Illustrator. This was the most time consuming and difficult part of the theme, and that is why there is currently only 3 custom icons. ;P

WordPress.org download link

Because this was a quick project, there is a to do list  (There always is) 🙂

  • Add WooCommerce support
  • Add a page and post template suitable for the Gutenberg full width images
  • Add alignment and alt tag for the custom Gutenberg blocks
  • Swedish translation
  • More icons

 

 

 

Categories
Quick tip

Things to consider when using underscores

I use underscores as a base for my WordPress themes, and many -if not most -themes submitted to the WordPress.org’s theme directory are based on it as well.

But there are some typical mistakes that we see frequently in underscores based themes:

Using old versions
Don’t use old versions of underscores, since they may contain references and fall backs for older functions. Always use a fresh copy.

Forgetting to update the readme files
Underscores comes with two readme files, one .txt and one markdown.
Depending on where you downloaded it from and whether or not you used the advanced option on underscores.me, you need to update these files.
Otherwise your readme files will not be about your theme, and they will read something like:
Contributors: automattic
_s
===
Hi. I'm a starter theme called `_s`, or `underscores`, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.

Imagine the users surprise when they open the readme and find instrutction on how to
1. Search for `'_s'` (inside single quotations) to capture the text domain.

Removing the credit
Some authors remove the credit that says that the theme is based on underscores. Please keep this in the theme. Be fair to other theme authors who has shared their work with you.
Theme name is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
and
== Credits ==
* Based on Underscores http://underscores.me/, (C) 2012-2017 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html)
* normalize.css http://necolas.github.io/normalize.css/, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](http://opensource.org/licenses/MIT)

Forgetting to update the theme and author URI
I can only imagine that the author was in a bit of a hurry here, but it is not uncommon that authors forget to update the links in style.css and in the footer credit.

Forgetting to update the language file
Authors often add new text strings to their theme but forget to update the language file.
Besides updating the strings, you also need to update the following file information:

# Copyright (C) 2017 Automattic
# This file is distributed under the GNU General Public License v2 or later.
"Project-Id-Version: _s 1.0.0\n"
"Report-Msgid-Bugs-To: https://wordpress.org/tags/_s\n"

-If you also choose to include an .mo file, make sure to rename it to the locale.
https://developer.wordpress.org/themes/functionality/localization/

Forgetting to update the text domain or prefix
Sometimes authors who use the search and replace method to change the text domain and prefix of the theme misses a couple of places.

 

 

Categories
Review

How to get your theme live faster

When authors submit themes to the WordPress.org theme directory they are sometimes surprised that they might need to wait up to 8 weeks for a review.
One of the resons to why it can take this long is that many authors submit themes that are incomplete.

By checking these four things you can greatly reduce the time it takes to review your theme:

  • License
  • Code Errors
  • Security
  • Translation

Back to basics

The list of requirements is long and we as reviewers understand if authors miss some of them. In fact very few themes are set live in the theme directory without changes.
However, I feel strongly that theme authors, –especially those who sell themes -at least should get the basics right.

License

WordPress themes need to be 100% compatible with GPLv2 or later.
The theme directory cannot redistribute your theme if you use items that have a license that limits redistribution or commercial use.
I expect authors to understand the difference between copyright and license. I expect them to include information about both in the theme.
If a theme has a commercial version,  that version also needs to be 100% compatible with GPL.

How to check:
Open style.css. Make sure that your stylesheets file header has a license statement.

Examples:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
or:
License: GNU General Public License v2 or later
License URI: LICENSE
Where license.txt is included and contains a copy of the license.

Open the readme file.  Make sure that you have included a copyright notice for the theme.

Example:
Twenty Seventeen WordPress Theme, Copyright 2016 WordPress.org

Make sure that you have listed the names, source, copyright and license information for all resources like third party scripts, styles and images, including images used in the screenshot, since the screenshot is part of the theme.

Code

Do not include code that you don’t understand. This might seem obvious,  but many authors copy and paste code from others without understanding what the code does. Keep your code simple. Comment and document your custom code. The reviewer might need to ask questions about your code, and more advanced code takes longer to review.

Do not include code, files or folders that are not used in the theme. Asking us to review code that is not even used will delay your review further. It’s a waste of our time.

Test your theme on different PHP versions. Test all your custom page templates, options, and custom widgets. Check for JS errors and missing files. Do not rely on the reviewer to do this for you. The reviewer is not your tester, we expect you to check this before you submit the theme.

Security

We understand that security can be the hardest part. But there are some simple rules that you can use when developing and checking your theme.

  • Don’t trust any data.
  • Escaping and sanitizing:  You can’t have one, you can’t have none, you can’t have one without the other.
  • Don’t include external files. All scripts, styles and images should be included in the theme. The exception is google fonts.

Untrusted data needs to be validated and/or sanitized before saving, and escaped as late as possible before output. Theme options are not considered safe.

By far the most common problem that we see in themes is missing escaping, or using the wrong function.
Untrusted links should be escaped using esc_url().
esc_attr()  -Attr stands for attribute. This should only be used inside actual html attributes like title, alt, width, height, placeholder and similar. It should not be used between html tags.
esc_html() This should only be used between html tags. It should not be used inside html attributes.

The customizer has a range of different control types, and authors can also add custom controls.  We often find that authors use sanitize_text_field() for all their control types, even controls that are not text fields.
Use a sanitize_callback that is suitable for your control type.

How to check:
Search your theme files for: sanitize_callback, esc_attr, esc_html and echo get_theme_mod.

Make sure that all text strings are translatable

There is no shortcut for this. The best way to make sure that all your texts are translation ready is to add the translation functions when you build the theme, instead of trying to add them afterwards. Finding text strings that are missing translation functions is a very time consuming job, where both the reviewer and the theme author needs to manually open all files -including JS files, to find these text strings.
You can understand why this slows the review process down for everyone, and why this increases the waiting time.

 

 

Help the reviewers and your fellow theme authors to reduce the queue time for everyone by only submitting complete, tested themes.
By checking these four things before you submit your theme, you have also reduced the risk of having your theme closed as not approved.

The Theme Review Team is open to everyone, and you can help out by reviewing submitted themes for these issues. With the help of more reviewers, the waiting time will be shortened.

Become a Reviewer

Categories
Review

My theme review process

Updated September 2017.

The Theme Review Team on WordPress.org encourages reviewers to find their own flow and tools that work for them. There is no right or wrong way to review a theme, as long as the requirements are checked and the author receives useful feedback.

My personal review process require a lot of manual effort. I know that some of the things that I do manually can be replaced by the new Theme Sniffer plugin, and I will eventually adjust to that.

Tools:

I use VVV (on Windows 10) but also have a live install available in case I need to show the author something.

I use Sublime Text code editor with the PHP Code Sniffer installed.
I like to use Poedit to check translation files, but Sublime Text can also read the pot files.
To create GIFS (for example to illustrate a broken menu), I use GifCam.
The theme unit test data: https://codex.wordpress.org/Theme_Unit_Test
A .txt document with my  standard review text.

Plugins:

The new developer version of the Theme Sniffer.

Preparations:

I always import the Theme unit test and I keep the requirements page and the WordPress developer reference open.

Process:

Normally it takes me 5-10 minutes to see if a regular sized (or underscore based) theme needs to be closed because there are 5 distinct issues, or if the review can continue.
But summarizing the findings and adding references, explanations and images to help the author fix the issues takes longer, from 20 mins and up.

I try to consider whom I am writing the review for:
-Do I need to add references?
-Do I need to help them find a solution, or is it enough if I mention the issue?

Not all steps are performed on all themes, it depends how the theme is built.
I also split large themes over several reviews, because I don’t always have enough time to check several hundred files in one go.
If I quickly find 5 distinct issues I may close the theme as not approved without doing a full review.

First I check if the screenshot in the ticket is reasonable and not a logo or mockup.
Then I check the Theme and author URI before I download the zip file.

I look through the theme files before I install the theme.
I normally start by opening functions.php, header.php and footer.php:

  • Are there hard coded scripts?
  • Is there text that is not translation ready?
  • Is everything escaped?
  • If there is a footer credit link does it match theme or author URI?
  • Are the functions in functions.php prefixed and are scripts and styles enqueued correctly?
  • Are menus, widget areas and theme support added correctly?

Then I check if there are folders named js, css, dist, assets or similar, and if there are minified files. I also check if there are any plugins, demo files or similar included in the theme folders.

  • If there are minified files, is the non-minified version included as well?

Then I open style.css, readme and license files and make sure that the license and copyright information for the theme and the assets have been added.

This is when I start making notes and adding items to the review.
I already have texts written for common errors that I can add and adapt for the specific theme.

Run Theme Check

  • Are there any errors reported?
  • Check any warnings manually.

Then, depending on the theme, I use my code editor to search the entire theme folder for the following:

  • get_theme_mod -This helps me find theme mods that are not escaped.
  • remove -This helps me see if the author has removed any customizer settings or non-presentational hooks.
  • function, -This gives me a handy list to help me check prefixes and whether custom functionality is used in place of WordPress functionality.
  • script -This helps me find hard coded scripts.
  • alt=, title=, placeholder= -This will help me find translated texts in attributes and make sure the texts are escaped.
  • add_theme_support – This helps me check if the author has added support for title (required), custom logo (instead of using their own) etc.
  • If there are multiple post formats and templates I might also search for wp_link_pages, query and reset.

Then I install and activate the theme to make sure that:

  • There are no php or js errors.
  • There is no redirect on activation.
  • Notices are not global and can be dismissed.
  • Plugins are not required, only recommended.

I don’t spend more than a few minutes on testing the theme layout, more effort is put into testing any custom options.

  • Is the correct number of posts displayed?
  • Are comments displayed correctly?
  • Are there any php or js errors?
  • Perform a search.
  • Test the 404 page.
  • Test the navigation.
  • Set up a menu, is it working? Test the menu in a smaller window, is it working? Make sure that it is not overlapping or in other ways disturbing the admin bar.
  • Test custom widgets and make sure there are no php notices, warnings or errors.
  • Make sure that there is only minor content creation.

When I go to the customizer and test the options, I also open the customizer.php or related files in my editor and make sure the options are sanitized and set up correctly.

  • Check to see if there is demo content, content creation or plugin territory functionality.
  • Is the upsell reasonable and is it added with the customizer API?

Go to the post editor and double check if any meta fields has been added, and that they are for presentation, not content.
Test the meta options.
Repeat for pages.
Test page- and post templates.

If there is starter content, reset the install to fresh and test it.

Is there any functionality or special items that should be granted an exception from the requirements?
Does the theme match the tags and description in style.css?

Whether I find issues or not, I still open each file in the theme folder manually and review them quickly, including minified files.
This is still the fastest way for me to check for untranslated texts and anything that stands out.

When the review is finished, I save it as a .txt file and then cut and paste the text in the Trac ticket.

By saving the reviews, I have built up a library of texts that I can re-use for other themes with similar problems.

Tips

The more themes you review, the easier it will be for you to find things that stand out, and your reviews will be faster.
Read the WordPress code, read more themes and also read other peoples reviews.
Read the theme developer handbook and get familiar with the developer code references.
Learn Underscores.
Share your knowledge with other reviewers, and accept that you can’t know everything, -ask questions when you are not sure about something.