binarymoon/jarvis

A speedy Gutenberg ready theme

Hi 👋

I make stuff online. Mostly focused on WordPress Themes, and Animation software. I also publish a WordPress Podcast and sporadically blog at BinaryMoon.

I'm on Twitter.

jarvis's Issues

Add support for the PWA plugin

The PWA plugin is designed to make websites faster, and more reliable.

It's being considered for inclusion in core.

https://wordpress.org/plugins/pwa/

Split colours in SASS out to custom properties

I want to be able to easily swap colours based upon the brightness of the current background colour.

• swap colours for custom properties
• set a light or dark class on the body based upon the brightness of the background colour
• add a live preview for the colour swapping that works in the customizer.

Customer Case study

Hey Ben

Today this site: https://celias.no/ uses Avada. Avada adds a lot of bloat and along with various plugins the site has become very slow. So I am thinking of switching over to a much simpler theme that is fast and slim. This could mean using Jarvis, Chaplin or another slim and fast theme.

Looking at the existing site:
Preheader: with a background color and some text to the left and a F (Facebook) icon to the right.
Header: Logo to the left and menu to the right and a shopping cart.

Hero area: uses a slider.

Various content below.

Footer with 4 widget areas.
Copyright info area below it with info on the left and F (Facebook) icon on the right.

It has a chat plugin that shows an icon bottom left. WooCommerce plugin using a shopping basket bottom right.

Specific pages have a sidebar right area.

Back to top icon on the right side.

The site is not too complex and contains elements such as a preheader, bottom copyright area left/right and a sidebar that could be emulated with Jarvis.

setup tgmpa to recommend plugins

http://tgmpluginactivation.com/

Site Layout Options

Hey

I will be going through the Site Layout options.

Header ->
Default
Center
Side Fixed

Add: Display Preheader (Topbar)
The Preheader/Topbar widget area might be a good place to have some additional information. Such a phone number, menu and whatever else. Perhaps even a WooCommerce shopping cart. Etc.

Single Post & Page
Left
Center
Add: Full Width
Add: Boxed

Display Post Date
Display Post Author
Display Post Author Details
Add: Display Post Category
Add: Display Post Tags
Add: Display Comments box (this makes it possible to in general turn off comments.)
Add: Display Post title
Add: Display Page title

Btw it looks like the date is set up to show how much time has passed since the blog post was published. I am seeing a 2 months ago, 2 weeks ago and 3 days ago on the blog page and the posts page. It would be good to have the option to show the publish date.

Footer Credits: #16 (comment)
(Adjust the credits box to a left and right box. See above comment.)

NB! All options + additional customizations could be added to the docs to give examples of code to add to the child theme functions file. There should always be the option to either adjust options through the customizer or (a mix) add code to the functions file.
Docs: Add additional widget area. Hide/show post meta.

Btw
Some options can instead of being added to the customizer could just be added directly to the docs as examples to how to add code.

Simplify javascript

Can I make the javascript smaller? Perhaps remove eventslib? Anything else?

Set font for elements that use unicode characters as icons

Ensure the characters work, even if the font is changed. Some fonts, for example on google fonts, may not have the required glyph. Setting the font to something generic like arial will force this to always work.

Ensure everything is escaped

Check all get_theme_mods are escaped

Anything else?

Recommend installed plugins

• Tada
• Pro Block Design (need to make it first :))
• WP-Toolbelt

Should we use TGM or are there better options?

Fatal Error in Footer

Fatal error: Uncaught Error:

Call to undefined function jarvis_social_links()
in /Applications/MAMP/htdocs/wordpress/wp-content/themes/jarvis/footer.php:27 Stack trace: #0 /Applications/MAMP/htdocs/wordpress/wp-includes/template.php(722): require_once() #1 /Applications/MAMP/htdocs/wordpress/wp-includes/template.php(671): load_template('/Applications/M...', true) #2 /Applications/MAMP/htdocs/wordpress/wp-includes/general-template.php(76): locate_template(Array, true) #3 /Applications/MAMP/htdocs/wordpress/wp-content/themes/jarvis/singular.php(49): get_footer() #4 /Applications/MAMP/htdocs/wordpress/wp-includes/template-loader.php(78): include('/Applications/M...') #5 /Applications/MAMP/htdocs/wordpress/wp-blog-header.php(19): require_once('/Applications/M...') #6 /Applications/MAMP/htdocs/wordpress/index.php(17): require('/Applications/M...') #7 {main} thrown in /Applications/MAMP/htdocs/wordpress/wp-content/themes/jarvis/footer.php on line 27

Remove WordPress block styles from pages that will never use it

Such as archives

Customizer Theme Options

In the customizer there is the Theme Options section with the following alternatives.

"Display Category Summaries"
"Display Date and Social Links in Header"
"Autoplay the Featured Content Slider"

I do not know yet what these do. Is this not active yet? For the moment they just seem like placeholders.

Improve editor styles

Problems I have noticed include link and blockquote styles. There's probably more :)

Blog page

Hey Ben

The blog page.
Many display options are added to the Single Post & Page that also affect the blog page.
What is left is the featured image and some layout options.

What you could do perhaps for the child theme is create a kind of standard blog page look. Such as Chaplin has a standard blog page look. The typical title in the top, then thumbnail, then some post meta, content/excerpt and then post category and tags below it.

Btw here is a method created for the Beans framework.
https://wpbeansframework.com/creating-a-blog-page-layout/

The reason why I share some of the Beans Framework methods is that I have a feeling that it is well put together and it might also give some inspiration for the Jarvis theme.

Add customizable copyright info

To override default footer credits

• Add customizer panel
• Add customizer preview js
• Add customizer controls js
• Split code out into separate files

Overview of Page Templates

Hey

I took a look at the Page Attributes -> Templates and noticed a few.
It would be great if you could add some notes to the readme about each template. Name and what they do. As it would be easier to get an overview of what the theme contains.
Thanks.

Different header layouts

• centered
• title fixed to left (like Label)

Header Height - Full Height

Selecting Header Height - Full Height.
Shows it like so:

What about having the option to show the top menu on the bottom when Full Height is selected?

Testing out the speed of various themes

I am looking to renew an existing client site: https://celias.no/
Today is uses Avada and I am looking into a slimmer and speedier theme. I made the test site https://fragmentsofawalk.com and found various themes I wanted to test out with focus on speed.

Testing themes

Following plugins are active:
Akismet, All in One WP Security, Caldera Forms, Companion Auto Update, Content Aware Sidebars, Custom Feeds for Instagram, Duplicator Pro, Elementor, FileBird Lite, Kadence Toolkit, PageSpeed Ninja, WooCommerce and WooCommerce Stripe Gateway.

https://tools.pingdom.com/

San Fransisco (as it is close to the data center for Arch Hosting where I have my domains.)

Overlay theme:
Score 90
Page size: 771.6 KB
Load time: 2.02 s / 514 ms / 596 ms (Ran the test multiple times)
Requests: 55
https://overlaywp.com/

Guten theme:
Score 90
Page size: 886.7 KB
Load time: 1.82 s
Requests: 55
https://gutentheme.org/

Pagebuilder framework theme (By David Vongries):
Score 90
Page size: 771.5 KB
Load time: 1.47 s / 1.33 s
Requests: 55
https://wp-pagebuilderframework.com/

ZenEther theme:
Score 90
Page size: 874.8 KB
Load time: 1.56 s
Requests: 55
https://zentemplates.com/

Chaplin theme:
Score 90
Page size: 879.36 KB
Load time: 2.31 s
Requests: 62
https://andersnoren.se/themes/chaplin/

Primer theme:
Score 89
Page size: 837.6 KB
Load time: 1.70 s
Requests: 60
https://github.com/godaddy/wp-primer-theme

Tabor theme (By Rich Tabor):
Score 90
Page size: 953.4 KB
Load time: 2.41 s
Requests: 42
https://themebeans.com/themes/tabor/

Twenty Nineteen theme:
Score 90
Page size: 784.8 KB
Load time: 2.01 s
Requests: 52

Jarvis theme (as of 25 July 2019):
Score 90
Page size: 784.8 KB
Load time: 2.01 s
Requests: 52

Gutenwp theme:
Score 89
Page size: 1.2 MB
Load time: 1.41 s
Requests: 68
https://www.themeum.com/product/gutenwp/

Atomic Block theme:
Score 89
Page size: 872.6 KB
Load time: 1.29 s
Requests: 64
https://atomicblocks.com/

OceanWP theme:
Score 89
Page size: 887 KB
Load time: 2.02 s
Requests: 55
https://oceanwp.org/

Ascend theme:
Score 90
Page size: 1.2 MB
Load time: 1.95 s
Requests: 78
https://www.kadencethemes.com/

Neve theme:
Score 90
Page size: 801.3 KB
Load time: 1.79 s
Requests: 53
https://themeisle.com/themes/neve/

Zakra theme:
Score 90
Page size: 778.2 KB
Load time: 1.36 s
Requests: 53
https://themegrill.com/wordpress-themes/

Beans theme (Thierry Muller):
Score 90
Page size: 866.2 KB
Load time: 1.91 s
Requests: 53
https://www.getbeans.io/

Features from other themes that inspire

I am testing out:
https://github.com/kevinbazira/algori-blogger

I found it interesting to see the first section in the customizer was the docs:

I will add on to this issue with various features that I find interesting.

Automate customizer settings for custom post types

Automatically add customizer settings for custom post types.

For example I want to be able to change the archive styles for the portfolio post type

Change header text colour so it uses a custom property

Currently the header text colour changes only the header text. Let's set it as a secondary colour used in a few different places so that we can tie the colour scheme together and add a bit more variety.

• Rename the customizer option to 'highlight colour' (or something similar?)
• Create a custom property for the colour
• Update the custom property in the customizer-preview.js

Swap font controls for radio inputs

Currently the control uses a collection of buttons that update a hidden dropdown select element, but in hindsight this is over-engineered.

By switching to radio inputs we can reduce the amount of javascript needed, and make the theme more accessible. I think it can be done without changing how it looks. So it's a win all round.

Add ability to hide the site header and description from within the customizer.

• Add control to customizer.php. Should be displayed in the site identity section of the customizer.
• Add (change) live preview (assets/scripts/customizer-preview.js) so that preview updates instantly.
• Allow description and title to be hidden independently of each other.

Footer widgets show max 3 in a row

Hey

I noticed this text in the customizer:
"Widgets that display at the bottom of your website. They are arranged in 4 columns and lined up automatically to make the best use of the space available."

I added 4 widgets and it now shows up like this:

3 widgets in a row and the 4th widget below.

Featured image below header behind page/post title.

I just tested the theme! Very very nice!

Another option on how to use the featured image is to place it below the header like a hero image.

Here I have the site title to the left and menu to the right (+ search icon) and the featured image below. Some pages have the title in the middle of the featured image, many do not.
https://religionskritikk.no/

It would be great to have the option to use featured image in the header as you have done it or have it behind the page/post title.

Ensure customizer code is only loaded when the customizer is loaded

More control over the Search Icon

I notice that the Search icon is automatically added in the top right corner of the page.
It would be nice to have a display Search icon checkbox in the customizer to where the user can select to turn it on or off.

The current theme only works on 5.2 due to the use of wp_body_open

The use of wp_body_open only exists in WordPress 5.2. Creating a PR now to make sure it works in lesser versions unless you want this theme to be 5.2 only.

Fatal Error

Hey

I downloaded and installed the jarvis theme on a local site using Desktop Server and Chrome.
On Mac OSX 10.13.6.

Theme activated. On frontend I clicked one of the pages I added to the menu and received the following Fatal error code:

Fatal error: Uncaught Error: Call to undefined function jarvis_breadcrumbs() in /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-content/themes/jarvis-master/parts/content-single-page.php:28 Stack trace: #0 /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-includes/template.php(724): require() #1 /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-includes/template.php(671): load_template('/Users/paaljoac...', false) #2 /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-includes/general-template.php(168): locate_template(Array, true, false) #3 /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-content/themes/jarvis-master/singular.php(31): get_template_part('parts/content-s...', 'page') #4 /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-includes/template-loader.php(78): include('/Users/paaljoac...') #5 /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-blog-header.php(19): require_once('/Users in /Users/paaljoachimromdahl/Documents/Websites/test-may-2019.dev.cc/wp-content/themes/jarvis-master/parts/content-single-page.php on line 28

Tidy up SASS

At the moment the SASS files are a combination of my generic SASS framework, and some theme specific things. It would be good to restructure this and make it more organised.

We could take inspiration from here:

• https://github.com/bbertucc/blockly/tree/master/styles
• https://github.com/WordPress/twentynineteen/tree/master/sass

Make use of the excerpt on single posts & pages?

Could the excerpt be used as an intro? Or should it be left up to the content editor to style things with the block editor?

Add support for microformats

Is there anything we can add, or improve regarding microformats?

I don't know if this is a theme feature or something individual plugins should take care of.

Maybe worth looking in to?

Page Builder Compatibility

Would you be open to allowing page builder compatibility? We'd have to do something similar to this: https://github.com/ronalfy/twentynineteen-child/tree/beaverpartsupport

We'd split the header and footer, and add hooks for both, and allow page builders like Beaver Builder and Elementor to customize the theme's header, footer, etc.

I can put together a PR concept for this if you're open to this.

Rebuild the `jarvis_social_links` function so it doesn't have the Jetpack plugin requirement.

Add search to navigation/ header

There should be an option to add a search box/ button somewhere in the header

Add a gutenberg property to the document settings that allows a custom background-color to be set per post/ page

• Add Gutenberg custom property
• Update the editor styles so the background colour and content colours match the colour selected
• set the body class as light or dark (overriding the default body classes) based upon the brightness of the selected background colour.
• Override the site background colour with the selected post background colour.

Make theme documentation website

• Custom footer info, with html examples (including basic things like links, bold etc)
• List of available filters and example usage
• Footer credits customization - #16

Gridd by aristath has made a very very fast theme

They developer aristath who has made the plugin Kirki and a theme called gridd.
https://github.com/wplemon/gridd

I activated the theme and the checked the speed on pingdom with no plugins active
Score:
A 97
Page size: 20.5 KB
Load time: 401 ms
Requests: 4

Page Speed Insights
Mobile: 100
Desktop: 99

From the github read me:

== Resources ==

• Hybrid Breadcrumbs: Script by Justin Tadlock (https://themehybrid.com) licenced under GPL 2.0
• Kirki: Framework by Aristeidis Stathopoulos (https://github.com/aristath/kirki) licensed under MIT
• Gutenberg: Gutenberg block styles files by the WordPress Community (https://github.com/WordPress/gutenberg), licensed under GPL 2.0
• DragSelect: Script by Thibault Jan Beyer (https://github.com/thibaultjanbeyer/dragselect) licenced under MIT
• wcagColors: Script by Aristeidis Stathopoulos (https://aristath.github.io/wcagColors/) licensed under MIT
• Underscores: Parts of the theme's PHP originated in the Underscores starter theme (https://underscores.me/) by Automattic (https://automattic.com/) licenced under GPL 2.0
• Mythic: The graceful fallback script for old PHP & WP versions originated in the Mythic starter theme (https://themehybrid.com/themes/mythic) by Justin Tadlock (https://themehybrid.com) licenced under GPL 2.0
• Screenshot: Image included in the screenshot from https://affecttheverb.com/disabledandhere/ licenced under CC-BY-4

Info about the theme:
https://wplemon.com/gridd/

Add support for additional related posts plugin

Currently Jarvis supports Jetpack related posts. Would be good if we could support something else.

May also be worth looking at how Chaplin does related posts since it has them built in

css columns don't work properly

The sidebar widgets (displayed in the footer) use css columns to lay out the content.

However they don't seem to fill up the space properly. On the demo site (on desktop) the third column is empty.

https://demo.prothemedesign.com/wordpress/jarvis/

I will need to work out a better way to style the widgets. Pure CSS only, no js additions.

Ensure keyboard navigation works

This is mostly a note to fix the menus. For some reason tabbing to menu items with a drop down doesn't activate the dropdown. I need to debug and fix this.

Reconsider removing featured images

Maybe add featured images back with a setting to show/hide them defaulted to off. This would keep the theme fast but also offer flexibility.

Add support for indieweb functionality

Investigate the indieweb functionality and see if there's any features or existing plugins we can add support for.

More info here:
https://matthiasott.com/articles/into-the-personal-website-verse
https://indieweb.org/Getting_Started_on_WordPress

Add link to docs in customizer

Themes and theme frameworks to take a closer look at.

I will update this issue along the way.

A progressive theme development rig for WordPress. https://wprig.io
https://github.com/wprig/wprig

Themes by Rich Tabor who has also made the plugin CoBlocks.
https://themebeans.com/themes/

https://www.andersnoren.se/teman/

https://github.com/search?o=desc&q=Gutenberg+ready+theme&s=updated&type=Repositories

https://www.codeinwp.com/blog/best-gutenberg-compatible-themes/

Remove jarvis_video_wrapper

Typography Options

I think it'll be quite useful to add typography and color to the default elements (h1s, h2, etc) and body copy. The theme Astra has such options, and I think it'll be quite useful.

If you're okay with this concept, I can go ahead and whip up a POC PR.

Add Blog homepage template

Display page title and large excerpt/ page content, then blog content as normal

Remove jquery dependency from site.

Rewrite code using pure js (es6). Focus should be on small, fast code.

• split global.js into separate smaller files
• setup a new gulp task for merging & transpiling the files.
• ensure the customizer preview doesn't get caught up in things.
• rewrite new merged files in vanilla js.
• borrow skip-link-focus from twentynineteen
• Can we replace scroll_to_hash with a small vanilla equivalent or should we just ditch it?
• Do we need some javascript to make the navigation work properly on touch & old browsers?