joshuaiz / plate

Plate: a super stripped-down WordPress starter theme for developers.

Gatsby's default starter

Kick off your project with this default boilerplate (live demo). This barebones starter ships with the main Gatsby configuration files you might need.

Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the default starter.

   # create a new Gatsby site using the default starter
   npx gatsby new my-default-starter

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-default-starter/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

7. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

8. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

9. LICENSE: Gatsby is licensed under the MIT license.

10. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

11. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

12. README.md: A text file containing useful reference information about your project.

13. yarn.lock: Yarn is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as package-lock.json, just for a different package management system.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Deploy

plate's Issues

header-title.php

Not an issue just interested in why abstracting the headers of each template into the header-template is done in this case. I can't see the benefits in this case, please what am I missing here? Loving the template, best starter I've found.

Error with comments on single.php

Firstly, I've just started migrating from Bones to Plate, thanks for keeping it going and now making it your own, the updates you have done are much appreciated.

Secondly, I think I've discovered an issue with comments when viewing single.php. Testing with fresh 4.9.4 Wordpress and fresh Plate clone. Where the comments should be is:

Warning: call_user_func() expects parameter 1 to be a valid callback, function 'template_comments' not found or invalid function name in /Users/james 1/Dropbox/Websites/acaciabeauty/wp-includes/class-walker-comment.php on line 174

Screenshot - http://take.ms/8Go9cS

I've tried removing some of the comment related stuff in functions.php but thats not it.

Looking for translation help

I'm looking for help with translation for the Plate theme. There are two things I could use help with:

1. Finding places in the theme where we can add localization. I'll start on this for future updates.
2. Updating and adding the respective translations.

This is my first foray into localization so once we have delineated the places that can be translated in the theme, we'll need people who can translate those into their respective languages and pull those in.

I've found this tutorial but it is a bit dated: https://wp.smashingmagazine.com/2011/12/internationalizing-localizing-wordpress-theme/

If anyone has some other links or resources outside of the Codex and Developer Tools, please add them here.

Also, I know I should have been conscious of localization from the get go however this theme started as an internal project for my studio so we are a bit late to the game. Better late than never and now that this is out there, I'd like it to be as accessible as possible so any help would be appreciated.

Modernizr script causes page to jump to top

Thanks for making this theme available. I'm finding it incredibly helpful!

I've noticed that when clicking 'back' in the browser, or linking to a different page with a hash in the URL to anchor to specific section, the browser briefly shows the correct position and then snaps to the top of the page.

Removing the Modernizr script seems to make the issue go away.

Tested in Chrome (Version 78.0.3904.87) and Safari (Version 13.0.3 (14608.3.10.10.1))

SCSS not updating

I am using CodeKit which is compiling my SCSS into CSS properly, but for some reason my theme isn't updating the changes. I have tried the customizer.scss, style.scss, and _base.scss files with no luck. What am I doing wrong? I'm using MAMP on localhost. Updating PHP files works fine, just trying to figure out the scss -> css thing.

Modernizr integration causes F grade "Minimize request size" score in performance tests.

I have traced down the issue to one section of the code in Modernizr. The request size associated trips up website performance testers and prevents sites from achieving a higher score due to excessive string length. Curious if there could be an alternative, or if Modernizr is totally necessary at time of writing? See attached Image and code snippet from problem source.

if(Modernizr.video.ogg)o.src="data:video/ogg;base64,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

Do Quicktags work out of the box?

No experience working with quicktags, is there something I need to do make them work? This how my editor looks.

Will not run on php 5.3.8

Plate doesn't appear to run on php 5.3.8. Consider adding a min php version in readme/requirements file?

At the moment, I am bound to use a server with this lower version of php and having developed a site use plate as a base (first time as I usually use a modded version of bones) I'm only now realizing this of course.

Hope this helps someone in advance.

Paragraph Block Preview Error

Hi Josh,

Not sure if this is something the WP team will fix or whether it's a change that requires new code to be added to the Plate theme?

I've just installed a fresh version of Plate and the new release of WP (5.4)

I noticed that the paragraph block is showing an error: 'This block has encountered an error and cannot be previewed.'

In the console log there's a reference to the react-dom-min.js file and the error: 'm.find is not a function'

Anyway, I hope this is useful, loving your work!

Cheers,

Ash

Edit: Tried switching theme to Twenty Twenty and the issue doesn't occur.

User Agent styling

Apologies if this is a dumb question and possibly nothing to do with Plate/Bones but do you know why User Agent styling is applied to elements on a page? Like this is being applied to a H3 tag, but fi I try and edit I can't find these values anywhere in the theme

display: block; font-size: 1.17em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold;

Customize Section Missing

Hello,
For some reason, the customize section is showing up blank. Can someone please help me troubleshoot this issue? There is not a plugin conflict and I have contacted my host and they said its theme-specific.

Instagram Embed Gutenberg block not displaying on front end.

Reported by a couple Plate users and I've been able to duplicate this issue on a local install.

Filed a new issue on the wp-calypso repo so waiting to see if anyone has any clues as to why this is happening: Automattic/wp-calypso#30837

Note that this Gutenberg block is for displaying a single instagram post.

In a nutshell, the embed is working on the Post or Page edit screen but does not show up on the front end.

There are no JS errors in the back end or on the front end page affecting this and additionally there were no PHP or Apache errors on my install so this is a bit of a mystery.

Plate and PHP 8.2

Our hosting provided force upgraded PHP to 8.2 and it more or less broke everything regarding Plate theme. Got a few error messages that obviously needs to be fixed... to begin with most likely:

Fatal error: Uncaught Error: Call to undefined function create_function() in /customers/e/7/a/monolitsports.com/httpd.www/wp-content/themes/plate/functions.php:1123 Stack trace: #0 /customers/e/7/a/monolitsports.com/httpd.www/wp-settings.php(611): include() #1 /customers/e/7/a/monolitsports.com/httpd.www/wp-config.php(98): require_once('/customers/e/7/...') #2 /customers/e/7/a/monolitsports.com/httpd.www/wp-load.php(50): require_once('/customers/e/7/...') #3 /customers/e/7/a/monolitsports.com/httpd.www/wp-admin/admin.php(34): require_once('/customers/e/7/...') #4 /customers/e/7/a/monolitsports.com/httpd.www/wp-admin/customize.php(13): require_once('/customers/e/7/...') #5 {main} thrown in /customers/e/7/a/monolitsports.com/httpd.www/wp-content/themes/plate/functions.php on line 1123

Woocommerce

Are there any WordPress template files already created for plate? Looking specifically for the main shop template and individual product template.

Frontend gutenberg styles?

Sorry for the potentially dumb question but what does this frontend gutenberg.css file do? What should be in it?
Only realised it was even on the frontend as GT Metrix threw back a problem saying the file is so small it should be inline...

from functions.php

plate_gutenberg_styles() {
    wp_enqueue_style( 'plate-gutenberg-styles', get_theme_file_uri( '/library/css/gutenberg.css' ), false, '1.0', 'all' );
}

Bones compatibility

If I have a bones theme, can I extend plates instead?

`rw_title` function isn't defined

The function referenced in functions.php to rewrite the title isn't actually defined/available anywhere. Since it's only a warning, PHP/WordPress will swallow it unless you turn on debugging and such

https://github.com/joshuaiz/plate/blob/master/functions.php#L52

However if you want to output the page title inside of meta tags, like so:

<meta property="og:title" content="<?php wp_title() ?>">

You'll get this:

<meta property="og:title" content="<br />
<b>Warning</b>:  call_user_func_array() expects parameter 1 to be a valid callback, function 'rw_title' not found or invalid function name in <b>E:\wordpress\wp-includes\class-wp-hook.php</b> on line <b>286</b><br />Just another WordPress Blog">

Which doesn't look particularly nice

Accepting contributions?

Is this theme, as well as Template, accepting contributions? Saw some things that don't comply with best practices for themes, so wanted to send a PR.