creativedotdesign/tofino

WordPress boilerplate theme on a modern stack. NPM and Composer.

Tofino

A WordPress starter theme for jumpstarting custom theme development.

Developed by Daniel Hewes, Jake Gully.

Ongoing development is sponsored by Creative Dot

Heavily inspired the by awesome WordPress starter theme Sage by Roots from Ben Word and Scott Walkinshaw.

Requirements

Prerequisite	How to check	How to install
PHP >= 8.2.0	php -v	php.net
Node.js >= 20.0.0	node -v	nodejs.org
Composer >= 2.0.0	composer -V	getcomposer.org

Installation

• Download the latest tagged release.
• Clone the git repo and run the following commands:

composer install
npm install
npm run dev

Note that the Vite Dev Server runs on port 3000. You access the website via the hostname and Vite will HMR or refresh automatically. If the Vite Dev Server is not running the website will pull it's assets from the /dist directory.

Important: You MUST set WP_ENVIRONMENT_TYPE to development or local in your wp-config.php file for the Vite Dev Server to work. Local by Flywheel does this automatically.

Features

• TailwindCSS (v3.4)
• Multilingual ready (WPML)
• Responsive
• General Options via ACF
  • Admin login screen logo
  • Custom Dashboard Widget
  • Social links
  • Sticky header menu
  • Client Data (Address, Telephone number, Email address, Company number)
  • Footer text
  • Alert Bar with top/bottom positions
  • Maintenance mode popup
  • Custom 404 page
• Advanced Custom Fields
• ACF JSON Folder
• TypeScript
• Vite build script
• Vitest for testing Vue components
• Cypress for Integration and E2E tests
• Composer for PHP package management
• Namespaced functions
• Auto post type / slug based template routing
• Shortcodes
• SVG Sprite
• Web Font Loader load Google, Typekit and custom fonts
• VueJS v3.x with Composition API
• Pinia State Management
• Form support via Tofino Form Builder plugin
• AjaxForm PHP Class
• Fragment Cache PHP Class

Documentation

Docs are provided by README.md files in each directory.

Deployment

We use GitHub Actions. The deployment script is issued the following commands:

composer install
npm install
npm run build

The following files and directories should not be deployed on the server:

src
node_modules
.vscode
.editorconfig
.env
.eslintrc.cjs
.git
.github
.gitignore
.gitkeep
.git-ftp-ignore
.git-ftp-include
.gitattributes
.gitignore
.prettierignore
.npmrc
composer.json
composer.lock
package.json
package-lock.json
postcss.config.cts
tsconfig.json
vite.config.ts
phpcs.xml
\*.md
cypress
cypress.config.ts
prettier.config.cjs
stylelint.config.ts
tailwind.config.ts
vite.config.ts
vite-env.d.ts

tofino's Issues

Make a basic Bootstrap 4 layout

Sticky footer theme option checkbox

Add classes to footer, conditionally output wrapper in header.php and footer.php.

Use the default Wordpress jQuery.

Agree on a coding standard loosely based around PSR-2

Add our custom rules to ruleset.xml.

Some light reading:
https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/
https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

https://github.com/roots/guidelines
https://github.com/roots/sage/blob/master/ruleset.xml

http://www.php-fig.org/psr/psr-2/
https://github.com/squizlabs/PHP_CodeSniffer/tree/master/CodeSniffer/Standards

Imagemin takes ages to install

Is there anything we can do to improve this? Or is there anything better we can use?

Support source maps for js and css

Cache generated list of bower main files

This should/might speed up gulp processing when using watch. Can reload the list on first run.

Add script/code for Google Analytics based on theme option UA Code.

Alright, I get it. Tofino recommends wp_clean...

...and I probably should and will use it. But if I don't, it would be nice to be able to dismiss that message in the admin area. It can be dismissed but it reappears on every page load.

Use Browser Sync instead of LiveReload

and see if we can pass a flag to run without updating the scroll / navigation on all browsers.

Nav item not being marked as active

From Andrew. The active class doesn't get applied to menu items if you are viewing a blog sub-page or an ACF archive.

This may just be a Sage thing but it's something we should test. I'm not sure if the blog sub-page part of it is only needed if ACF is active. We might need to make a theme setting for this, or maybe detect if ACF is active.

Here is the fix so far.

// If your blog isn't at '/blog', you'll need to change that part of the code.
// Mark (highlight) custom post type parent as active item in Wordpress Navigation
add_action('nav_menu_css_class', 'add_current_nav_class', 10, 2 );
function add_current_nav_class($classes, $item) {
  // Getting the current post details
  global $post;

  // Get post ID, if nothing found set to NULL
  $id = ( isset( $post->ID ) ? get_the_ID() : NULL );

  // Checking if post ID exist...
  if (isset( $id )){
    // Getting the post type of the current post
    $current_post_type = get_post_type_object(get_post_type($post->ID));
    $current_post_type_slug = $current_post_type->rewrite['slug'];           

    // Getting the URL of the menu item
    $menu_slug = strtolower(trim($item->url));

    // If the menu item URL contains the current post types slug add the current-menu-item class
    if (strpos($menu_slug,$current_post_type_slug) !== false) {
      array_push($classes, 'active');
    } elseif(strpos($menu_slug,'/blog')){
      // Extra fix for blog subpages, and grouped results      
      if(is_single() || is_tag() || is_month() || is_category()){
        array_push($classes, 'active');
      }
    }
  }
  // Return the corrected set of classes to be added to the menu item
  return $classes;
}

Set private:true in package.json

When you run npm install it gives a warning "no repository field". If we set private to true it will stop us from running npm publish (which we won't want to anyway) and will prevent the warning.

Use plumber to handler errors

Error handling is still hit and miss with different modules erroring in different ways.

Plumber seems to be the standard way to handle this.

Copyright text

A request from the team. Only a small one. A copyright function that would generate a copyright string from the current year and the site name.

I think this issue is longer than the code will need to be...

Webmaster role

Editor role, extended with access to certain other things.

Menu centre needs fixing

Considering making it flexbox.
Shouldn't interfere with the branding on the left or anything on the right (e.g. language selector).

Add an icon (svg sprite) option to social links

Sticky menu isn't sticky, it's fixed.

This should be renamed in the theme options. The footer is sticky but the menu is fixed.

Setup demo website.

It should always be sync'd with the master branch.

Can we auto-fix linting errors?

PHP Code Sniffer says it can. What about the JS and SCSS?

Blank after install

front-page.php / home.php needs to be manually created with header and footer after install. This may be a feature and not a bug. Jake seems unsure.

Use gulp-load-plugins

Errors in styles (and probably scripts) make gulp watch stop.

Fonts

assets/fonts/* should be copied to dist/fonts/* as well as any fonts from Bootstrap.

We also need a fonts.scss file.

Don't lint vendor files such as those from bower_components

Found as svg4everyone legacy script throws warnings and an error inside jshint, but it works fine.

Add SVG Sprite shortcode

It would be nice to be able to add SVG sprites as shortcodes.

A friendly install script, like wp-install.

Add init script for JS that needs to run in the head.

Add an init script for JS that needs to run in the head.

Current use case is for svg4everybody which needs to run a legacy script to polyfill externally referenced svgs for IE6-IE8 and EDGE 12!!

Fix for this in the Edge browser by the MS team is In Development, https://dev.modern.ie/platform/status/svgexternalcontent/ but who knows how long that might take.

EU Cookie footer warning thing

Clean up SVGs when compiling

Using something like this, for instance: https://github.com/svg/svgo

Hamburger icon does not open mobile menu

Make a theme options form.

Probably using Option Tree.

Sticky footer without sticky header padding issue

With the header not sticky and the footer sticky padding is still added to the body tag.

Fix up the css for this senario.

move wrapper class somewhere else

Currently the wrapper class is on the main element. It should be on a separate div that should be opened in header.php and closed in footer.php.

Add WordPress classes

https://codex.wordpress.org/CSS#WordPress_Generated_Classes

Think about using BS styles.

Add Repo to Travis CI

I've created a basic unit test. @mrchimp please add this repo to Travis CI as you are the owner. Cheers.

Add files in /lib to composer autoload?

Shall we?

Currently they are in an array in functions.php being loaded the same way roots/sage does it.

Assign main menu to main menu position

Contact Form

Should we add support for a basic contact form?

I'm stopped using Contact Form 7, and I'm now rolling my own using ajax and a php script.

Thoughts?

Generate minified and un-minified versions of css and js files.

Do we want both versions in the dist folder? or set an environment variable for build? e.g. dev = unminified with sourcemaps, prod = minified no source maps.

Allow single SVGs and Sprites from the assets folder.

Split the gulps tasks etc.

Use wiredep

Use wiredep for bower dependencies.

Possible Theme Settings

Logo Upload
Email Address
Telephone Number
Menu Position - Left/Centre/Right
Menu Sticky - Yes/No

Missing files should cause errors

There may be some rational to this that I'm not seeing but I think missing dependencies should stop the compilation. We should use Vinyl/Gulp4/whatever to make this happen. And/or consider outputting a list of included files for easier debugging.

SVGs aren't being watched

Third party scripts not being added

I'm using the free version of this and the scripts aren't being added to the site. Works fine with the default theme, so I'm assuming it's a Tofino issue.

Add console.log check to gulp

console.log can cause issues on IE if left in on production. We should check for this and show a warnign when gulping. Are there any other similar things we should be checking for?

Fix Error: ENOTEMPTY: directory not empty, when running the full build

The gulp clean task is acting up. Might be linked to the clean task running in parallel with the other tasks.

Daniels-MacBook-Pro:tofino daniel$ gulp
[23:23:57] Using gulpfile ~/Private/web/tofino.local/public_html/wp-content/themes/tofino/gulpfile.js
[23:23:57] Starting 'clean'...
[23:23:57] Starting 'images'...
[23:23:59] Starting 'svg-sprite'...
[23:24:00] Starting 'sass-lint'...
[23:24:00] Starting 'jshint'...
[23:24:01] Starting 'fonts'...
[23:24:01] gulp-imagemin: Minified 0 images
[23:24:01] Finished 'images' after 3.5 s
[23:24:01] Finished 'svg-sprite' after 1.93 s
[23:24:01] Starting 'svgs'...
[23:24:01] Finished 'svgs' after 9.45 ms
[23:24:01] Finished 'fonts' after 347 ms
[23:24:01] Finished 'jshint' after 911 ms
[23:24:01] Starting 'scripts'...
[23:24:02] 'clean' errored after 4.43 s
[23:24:02] Error: ENOTEMPTY: directory not empty, rmdir '/Users/daniel/Private/web/tofino.local/public_html/wp-content/themes/tofino/dist'
    at Error (native)```

Can't install as a zip file

If you download the zip file and install it into wp via the admin area you end up with a white screen of death. I'm assuming this is because the npm/bower/composer/gulp tasks need running. Is there some kind of WP hook for this?

Add Admin header image file from theme options