Gsoc 2016 Neverland #4 #5

These passed two weeks were so stressful. My plan for mid-term is Neverland can build a WordPress theme.

As I mentioned in Gsoc 2016 Neverland #3 I have to choose between Sage or Underscore.
Sage is DRY but it also means that designers must seperate their theme into many smaller parts. And that also means we have more works to do.
So I choose Underscore. It’s not DRY, it’s just skeleton theme so I can adopt quickly. And one more reason I choose it because it is from .

There is a pitfall that Underscore(_s) require you rename all _s tag to your theme name https://github.com/automattic/_s#getting-started. I search for a underscore theme generator but there aren’t any promised packages.

Now the hardest part comes. I was thinking so much about how a WP theme is built from static html. Should I wrap the html with WP code or should I inject the html into WP code. You can think it’s not different. But it’s so much different when you actually code.
After tried and failed, I came up with a solution. I used mustache tags for both _s and html files. I used sublime and replace all the _s tags with mustache tags {{themeName}}. After that I deleted most of code in _s replace it with some tags like {{{ body }}},{{{content}}} … In blueprint files, I defines some tags like {{{article__author}}},{{{article__author--link}}} … (I follow BEM methodlogy). So basically rendered steps are like this:

  1. Neverland replaces {{themeName}} with the theme Name and copy all files from workers to buildings folder.
  2. Neverland renders {{{ body }}},{{{content}}} … with the corresponding files body.mustache,content.mustache
  3. Finally Neverland renders {{{article__author}}}, {{{article__author--link}}} … with WP tags like <?= get_the_author() ?>, <?= get_the_author_link() ?>

With this approach the designers have to care about the tags {{{article__author}}} … In the future, maybe I will use DOM parser to identify the content automatically so the designers dont have to know the tags.

And here is the results:

Screen Shot 2016-06-24 at 13.31.24

HTML theme

Screen Shot 2016-06-24 at 13.41.14

WP theme – Homepage

Screen Shot 2016-06-24 at 13.41.55

WP theme – Single post page

As you can see, it is working. But there are still many works to do.

Thanks for reading.

Advertisements

2 thoughts on “Gsoc 2016 Neverland #4 #5

    • neverendingo says:

      You are right, the coloring is really similar. But note, this is just a dummy design, to see if it is possible to render CMS themes (in this case wordpress) from static html design.
      That makes it easy to work on a design without knowing the internals of writing a full theme.

      As for a final design for KDE websites, the coloring would most likely be based on Breeze, rather than Obsidian. But yeah, who knows.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s