Foxland

Same theme in WP.com and WP.org?

Written by Sami Keijonen

I started my journey in WordPress.com with Mina Olen theme. But it’s completely different theme than WordPress.org version of it. WP.org version is build from excellent Hybrid Core and support several plugins like Easy Digital Downloads.

WP.com won’t allow Hybrid Core in their themes and they have their own plugins build in Jetpack so I needed to take down lot’s of code and make modification to original theme. I have written becoming a theme author in WP.com before.

After that process I started to think more and more that is there a way have to same theme in WP.com and in WP.org?

And the answer is no, you can not.

Why not?

We had really good conversation in twitter and came to conclusion that it’s not possible to have same theme in WP.com and in WP.org. Even the most simple theme needs to have different Tags in style.css file because WP.com have a little different Tags what they use. And Theme URI is different. Also in WP.com all the Customizer settings needs to be under one section called Theme. Well, we can have that in WP.org also even if it feels a little weird.

Also JS and CSS files can’t be minified in WP.com because they have their own system for it. And in WP.org version you really want to have minified and compressed JS and CSS files just like in WordPress core. So we’re back to square one and need to have two different themes even with small changes.

But I am not gonna give up that easily.

Two themes but same code base using Grunt

I’ve been building a new one pager theme called Kulkuri and these are the challenges what I’m facing.

  1. We have been building theme updater and I’m including it in theme-updater folder. But that’s definitely not gonna be allowed in WP.com. It needs to be removed.
  2. And when I remove theme-updater folder I need to generate different .pot file for WP.com.
  3. I’ve minified JS files and those are not allowed in WP.com. All .min files needs to be removed.
  4. I need to update tags for WP.com version.
  5. I need to update Theme URI for WP.com version.

I have only been using Grunt for couple of weeks so I’m not pro on that one. But I’m not gonna look back anymore. It is exactly the tool that gives me power to automate all those challenges and some more. I could always manually edit files but that’s not the point in this article.

Grunt tasks for challenges

I’m not gonna walk you through how to setup Grunt, that’s another topic. But you can start by reading couple of articles like Grunt for People Who Think Things Like Grunt are Weird and Hard and Using Grunt with WordPress Themes.

Check out the Kulkuri Gruntfile.js Gist and I’ll try to explain what I’m trying to do.

Clean build and buildwpcom folders

First I wanted to have clean folder and .zip file for WP.org and WP.com versions of the theme. By clean folder I mean that there is no .git or node_modules folders, package.json or Gruntfile.js files and so on.

For this I’m using

You can check out the example code from gist.

Minify files but don’t use and include them in WP.com version

I use uglify for compressing JS and CSS files. But how on earth those will not be used in WP.com? The trick is this.

`/**
* Whether or not the current environment is WordPress.com.
*/
function kulkuri_is_wpcom() {
return ( defined( ‘IS_WPCOM’ ) && true === IS_WPCOM );
}

/**
* The suffix to use for scripts.
*/
if ( ( defined( ‘SCRIPT_DEBUG’ ) && true === SCRIPT_DEBUG ) || kulkuri_is_wpcom() ) {
define( ‘KULKURI_SUFFIX’, ” );
} else {
define( ‘KULKURI_SUFFIX’, ‘.min’ );
}
`

I learnt this trick from Make theme by Theme Foundry. After twitter conversation it turns out that this is not allowed in WP.com but what if we don’t even send .min files to them? I’ll push my luck and automate this also.

This is done in part of the copy task.

`’!theme-updater/**’, // Do not include theme updater in WP.com version.
‘!style.min.css’, // Do not include style.min.css file.
‘!**/*.min.*’, // Do not include .min files.
‘!languages/kulkuri.pot’, // Do not include kulkuri.pot in WP.com version.
`

Generate different .pot files

This is also pretty simple using wp-i18n task because you can exclude folders. In my case I want to generate two different .pot files where in WP.com version we exclude theme-updater folder.

`makepot: {
target: {
options: {
domainPath: ‘/languages/’, // Where to save the POT file.
exclude: [‘build/.*’, ‘buildwpcom/.*’], // Exlude build folders.
potFilename: ‘kulkuri.pot’, // Name of the POT file.
type: ‘wp-theme’ // Type of project (wp-plugin or wp-theme).
}
},
targetwpcom: {
options: {
domainPath: ‘/languages/’, // Where to save the POT file.
exclude: [‘build/.*’, ‘buildwpcom/.*’, ‘theme-updater/.*’], // Exlude build folders and theme-updater folder.
potFilename: ‘kulkuriwpcom.pot’, // Name of the POT file.
type: ‘wp-theme’ // Type of project (wp-plugin or wp-theme).
}
}
},
`

Update tags and theme URI for WP.com version

For this I’m using text-replace. I will only replace these in the final buildwpcom folder like this.

` tags: {
src: [
‘buildwpcom/<%= pkg.name %>/style.css’
],
overwrite: true,
replacements: [ {
from: /^.*Tags:.*$/m,
to: ‘Tags: green, white, light, one-column, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, threaded-comments, translation-ready, infinite-scroll, announcement, business, portfolio, bright, clean, light, modern, playful, professional, tech’
} ]
},
themeuri: {
src: [
‘buildwpcom/<%= pkg.name %>/style.css’
],
overwrite: true,
replacements: [ {
from: /^.*Theme URI:.*$/m,
to: ‘Theme URI: http://theme.wordpress.com/themes/kulkuri/’
} ]
}
`

Conclusion

There is no way to have same theme in WordPress.com and in WordPress.org. But if the theme is simple enough we can use the same code base and auto-generate both themes using Grunt. Or do it manually if you prefer. I already published WP.org version of Kulkuri theme for this experiment. And in a minute I’ll send a WP.com version on it’s way. I know they can crush my idea in a second and force me to manually keep two different themes. We shall find that out sooner or later and I’ll let you know how it goes.

Edit:

Kulkuri wasn’t accecpted in WP.com so this experiment is coming to the end. Basically they didn’t want to use WordPress menu system as one page scrolling system.

I still think using menu system is a good or even the best way for end users having a one page scroller. They suggested to have child pages of Front page but it would be too painful to re-order pages (equals content) in my opinion. But it’s their site and their rules so there is nothing more to add. I totally respect that.

Categories:

Tags: