Learning WordPress Customisation: Themes and Plug-in Development Part 1

My foray into wordpress theme development.

Introduction: the need

The need stems from the fact that the wordpress ecosystem is highly inefficient and wasteful. When comparing blogger versus wordpress.com, it seems like it is a lot easier to change the layout and colours of a blog on blogger than wordpress.com. WordPress seems to be built around spending a lot of time trying to find the right theme with both the correct colour scheme and layout, as few theme authors integrate the themes with the wordpress customisation features. Having looked at theme creation, that is probably because hooking a theme into the customiser is too involved. So with wordpress stuck with looking through 1000’s of themes looking for the right combination of layout and colours. There are some groups of themes, each theme has a different name but all members of the group change only with regards to their colour scheme. So stuck with a problem of wanting a feature on the right and say blue, but only available on on left and blue, if want on the right then its green. It isn’t stuff which should be difficult or hindered.

Initially looking at  theme development seemed to involved, so I found the Divi theme by elegant themes. Two reasons for buying this theme were, I had access to all other themes by elegant themes, and Divi had a built-in builder. A builder of what though. My initial thoughts were that it was a theme builder, so that once built the static front-page and the blog page, and thus got the layout and colour of the site, the builder would then be out off the way. No so! The builder hooks into the post editor, so can either create a post or page using the Divi builder or the default wordpress editor. I don’t use the Divi builder to write posts, that would be really cumbersome, to insert a text module and write in the text module editor floating above the normal wordpress editor. But even though not using the Divi builder to write posts, it still causes problems and interferes with saving and publishing posts. Also each time it and other plug-ins update, get memory management problems, and conflicts with license managers.

So recently I had problems with renewing my SSL certificate, after the aggravation of getting that fixed up, I log onto wordpress, multiple plug-ins  update. Not all of them can because conflict between Divi license manager and woocommerce license manager. So I cancel the woocommerce extension which was reporting the problem, with Divi API and license key. Then I write a post, and save draft, and get an error that not enough memory for Divi to complete its task. The post seemed to have been saved anyway, so I continued, and then get similar error when I go to publish. Once again it seemed to have been published anyway.

So seems I have a choice get rid of Divi or get rid of plug-ins. Since I want to install a forms plug-in, the choice made was to get rid of Divi theme. So I installed sketchpad theme as a temporary measure. Temporary because its not responsive and is therefore a step backward: though I like its compact nature, wordpress themes to me tend to have far too much vertical white space, and this theme isn’t like that. But I really want the site to work on a mobile phone, and developing separate Android apps seems a waste (not the least of which is that Android studio requires far too much ram, and is otherwise far too slow to open. A website should open and work on any device, whilst an Android app has limited scope).

So in abandoning Divi theme what has been lost? Primarily the ability to drag and drop modules to create front-page and blog page layouts, and there are lots of useful modules. But it doesn’t really make design less cumbersome or more visual. A text module is just a block, it doesn’t show as text until the page/post is published. It is not a WYSIWYG editor, it is not the same as using Visual Studio 2005 to create a webpage moving between design view and code view. Modules in Divi have multitude of properties which are not fully explained or described, and additional CSS styling can be applied. Except apply what styling to what? It does not allow applying classes, so can only create CSS overrides to existing CSS classes. But what classes?

It would seem better if the Divi builder was more like a  forms plug-in: was independent of the post editor, permitted creating custom pages and post templates, which can then where appropriate be added to ordinary pages/posts by the use of shortcodes. In such manner the Divi builder keeps out off the way, when writing ordinary posts. But it’s not like that. Also some things in Divi theme I don’t like and cannot change via the builder, so still end up having to create a child theme.

Child theme seems easy enough. But as an example, the text in widgets, using the Divi theme, was largely invisible and unreadable: but what to change? The typical wordpress customisation blog, suggests using browser developer tools to look at website and inspect the elements. Yes! That’s a waste of time. Blocks nested within blocks, nested within blocks, tracking down which style rule coming from which class is changing the appearance is a time consuming exercise.

Whilst wordpress does assign some default classes to the various elements it generates, identifying these classes is not so convenient: plus few style.css files contain any rules for the classes. Theme authors seem to create their own style classes and/or id’s: so each theme represents a new learning exercise if wish to customise by creating a child theme. It seems a lot easier and more convenient to create a theme from scratch, than to create a child theme. Starter themes and css frameworks all pose the same inconvenience of learning someone else’s approach, which may contain a great deal of bloat compared to the needs of the task at hand.

Bloat is also the problem with plug-ins, as each plug-in essentially requires its own overhead to connect it into the wordpress system. Wrapping several plug-ins into a single plug-in can thus save memory, and otherwise reduce conflicts between such plug-ins. So have one site specific plug-in rather than a large collection of plug-ins. The tasks done by some plug-ins are relatively trivial, but the web generally promotes solutions to wordpress wants by installing a plug-in. Compared to what I have seen listed by others I only have a few plug-ins, but each time I log into wordpress, it seems I have to spend time updating stuff before I can get to work writing. It’s time wasting, and I am sure most updates are just the authors having little better to do than to make changes, not make improvements, just changes.

With my own theme and plug-ins, no updates unless I decide I want change. Minimal conflicts, and reduced maintenance.

Ok!  So I have limited knowledge of graphic arts, typography, html, css, php, and mysql. However, wordpress as a content management system (CMS), is essentially a specialised version of a database management system (DBMS). So how difficult could customisation be compared to programming Dbase, Paradox and MS Access?

Basically have a database on a server somewhere different than the website, this database typically MySQL, though I believe other databases can be used. WordPress provides the front-end, to create, add, modify, query and report about the contents of the database. WordPress is written in php, possibly some javascript, and uses SQL to interact with the database. It interacts with users via web pages written in html and styled using css. The web pages are generated by wordpress using php. Theme files are a combination of php and html, from what I have seen thus far they are close to an unreadable mess. Still html and css are conceptually relatively easy. There seems to be a problem in that CSS whilst permitting changes, doesn’t provide much control: that is the results depend on browser and hardware. So lots of hassles and workarounds, which tends to promote use of CSS frameworks, or using starter themes.

As for learning php, it’s no different than learning any other application language or high level programming language to the extent necessary to get a task done. For the most part don’t really need to know much about php, as mainly calling wordpress library functions: so mainly learning wordpress system than learning php. As for SQL, that is mainly hidden inside the wordpress functions.

All up it’s just another chunk of technology to become familiar with, rather than anything overly new.

Getting Started

Ok! So I read a few blogs, and first attempted to create a child theme for Divi, and after a lot of exploration eventually managed to change the colour of the text on the widgets. Creating the child theme easy, finding the chunk which needs changing not so easy.

So went from child theme, to creating full theme, read a few more blogs: decided to buy some books:

  1. Karol Król,(2017), WordPress Complete Sixth Edition
  2. Eduonix Learning Solutions (Tom Jacob) ,(2017),Learn To Create WordPress Themes By Building 5 Projects,
  3. Rachel McCollin, Tessa Blakeley Silver, (2013), WordPress Theme Development Beginners Guide Third Edition
  4. Yannick Lefebvre, (2012), WordPress Plugin Development Cookbook

So I started by working through Jacob’s book. The first project is a simple wordpress theme, introducing the basic building blocks. The second project introduces more advanced features of wordpress themes. The third project introduces the use of CSS frameworks and uses W3.css, the fourth project uses bootstrap.css and the fifth project uses foundation.css. McCollin and Silver just dive straight into using their own framework: layout-core.css. Whilst Król’s starts with a starter theme: _underscores.

Frameworks seem to be the way to go, for developing the website layout. Also for all but the simplest of sites, the general approach seems to be to start by developing a layout using html and css. WordPress website can thus be developed in the first instance without need of wordpress and without need of WAMP or other server environment.

I part worked through the first two projects in Jacobs book, creating staged themes, then got bored, and skimmed read the rest. Similarly I skim read McCollin’s book. McCollins presents large slabs of code with little explanation, other than side notes of : what just happened? Whilst Jacob builds things up progressively, unfortunately it is cumbersome identifying the location for each extra line of code to be added. So I ultimately just downloaded the available source files. The source files for each book, are either incomplete, obsolete or contain errors. Still a good source of reference.

I took a look at the underscores starter theme, but it poses the same problems as creating a child theme, need to explore and discover the classes used by the theme. With html tags opened in one file and closed in another file, it is not so simple to discover the overall layout and structure of a site. It kind of requires working in reverse, taking the individual php file, ripping out all the php, and creating a single index.html file. Even having done this, it then becomes apparent that classes used in the php files, have no rules in the style.css file. Determining the contents of the style.css is another hassle.

Basically the style.css file contains a list of style rules. Each rule comprises of a list of selectors followed by a list of properties or attributes and values. Each rule is basically a record in a database table, so it seems that should be able to read  the style file into a database. Once have a database of the style rules, should be able to sort the rules into order, identify duplicates, arrange with correct priority, and otherwise be able to query and manipulate the rules. Seems like a tool which should exist already. But couldn’t find. Though the pinegrow website builder software seems like it could be useful. Whilst SASS and LESS seem to be the tools to use to generate CSS and provide for some benefit using variables in the CSS rules. It seems like the way to go, especially since common frameworks like bootstrap and foundation make use of SASS. However further research is required to figure out how to make SASS or LESS available on my computer, whilst pinegrow is too expensive at this moment.

Making Use of MS Excel

So I started with the tools I’m most familiar with MS Excel/VBA. I wrote a script to import the style.css into Excel worksheet. Each worksheet row, represents one CSS rule. CSS selectors separated by commas are placed on separate rows. All attributes are listed across the top of the worksheet and values listed on the last row of selectors. Once in Excel worksheet can use the data tools to query/filter the css rules. For example identify classes and ids with the same name. See which rules set background colours and which don’t. Visually see what the colours are by converting the hex codes into colours of the worksheet cells or text.

Prior to writing such script,  Excel also seemed like a good choice for sketching out the layout of the website. CSS frameworks typically provided rules for defining rows and columns, since Excel and other spreadsheets use a grid of cells, it provides a good starting point for mapping out a website using such grid oriented css frameworks. Bootstrap for example provides a basic grid of 12 columns, which can be merged to create columns of differing widths. Merging cells is a relatively easy task for Excel. As a starting point since only attempting to map out the primary containers I just adopted 12 Excel columns: however for better layout could also use extra columns to represent the space between the cells in the website layout.

Excel also seemed useful for adding dimensions of margins, borders, padding and width of containers used in the layout. Using Excel named ranges then became useful for identifying frequently used information,such as the website name and description. links to dummy text to represent a post. Then there are Excel’s built in themes and colour sets, so can colour the mock-up of a website using Excel’s built-in styles, then change the themes colour set to get a different visual appearance. Alternatively can use Excel’s named custom styles to match the styles used by a wordpress theme.

So I already use Excel/VBA to rip the wordpress xml export file apart and create individual html files for each post, so I can read and otherwise edit offline. Similarly I also use vba to highlight an Excel range and export to an html table, which I can then paste into a wordpress post.

So it is looking like it is possible to automate theme generation using a combination of Excel/VBA. More importantly it maybe possible to write a useful tool to interrogate existing themes and extract the necessary information to customise and create a child theme. As indicated earlier starter themes have the same problems as developing child themes. Really wordpress should be able to read the theme files and automatically generate customisation options without the need for the theme developer to write php code to hook into the customiser. I’m not sure how Blogger templates work, they may impose some styles on the theme author, but all seem to have extensive customisation features without need for learning CSS.

So having read and parsed a CSS file, there is potential to automatically create Excel named styles, to then visually modify the styles and then create a new style.css file. Similarly could read the the theme php files, rip out all the php and leave behind the html, with appropriate simple text variables left behind where the php code was located, then assemble the php files into a single file. In other words automate the exploration of identifying which class containers the whole website is wrapped in. Full automation maybe too involved but partial automation may be doable.

At the moment I have made little progress creating a new theme as spent most of my time attempting to discover the structure of sketchpad theme so that I could create a child theme as the first starting point, and otherwise adapt it so that it is partially responsive. However it is a complex theme of many containers, which doesn’t seem to matter as boxes are positioned outside containers creating overlaps. Modifying the theme is thus time consuming.

So I look at underscores starter theme but once again, most of my time spent tracking down the classes and styles which form its structure. Similarly when looking at the wordpress+bootstrap starter theme.

All of which suggests the best starting point is to go back to Jacobs book, and start from scratch with the advanced wordpress theme. Do like everyone else and make it up as go along.

A starting point for a theme is also the basic html tags and setting default styles. One problem with available themes is they can mess up presentation of pages/posts. For example something overrides style of tables, or the typical wordpress theme has far too much vertical white space between each written line. So to get the basics right, need a template which can use as a post and tests each of the html tags typically used in writing a post/page. For example this web page could be adapted into a post to test the basic styles for a wordpress theme. Some theme previews use something similar, but not all themes have such.

So thus far I have a collection of small test files both php and html, experimenting with wordpress loops, and otherwise experimenting with layout using css. So I can just about build something similar to the layout I had created with Divi builder, however its seems I will need to use a css framework to make the presentation responsive to screen size. Most likely framework to adopt is bootstrap, in combination with underscores starter theme.

Though in looking for alternative starter themes, I have found some other themes which may be suitable as parents for child themes, however these all tend to be dependent on plug-ins, and use of such themes may take me back to the problem experienced with Divi. I did also find the general wordpress page builder siteorigin which maybe less resource intensive than Divi. But for the moment will stay away from more plug-in’s until find the form builder I wish to use. Current choices for form builders are:

  1. smartforms
  2. wpforms
  3. ninja forms
  4. gravity forms

My preference is typically in the order shown. If I was to do a formal value analysis, I expect that to also be the resulting order. Smartforms has a lot of capability out off the box, whilst the others are expensive and require additional plug-ins.

Form wise I’d like to take advantage of the wordpress database to collect technical information for projects, possibly by-pass any need to transfer to our current offline MS Access database. Secondly the form’s could collect information to enquirers needs and provide them with answers. In short they can be used to create a product configurator. The capabilities of some of the forms plug-in’s also suggests that maybe do not need woocommerce, and the forms may be better for sale of services.

On the other hand grasping theme development and plug-in development may allow me to custom build more appropriate tools for providing technical services: and thus get rid of all installed plug-in’s. Converting my structural design VBA code into php, wouldn’t be all that difficult, and since php is server side, it is potentially more productive than converting to javascript. Not just an issue of developing an information website, but providing online tools so that response to an enquiry can adapt to the needs of the enquiry.

Tool Kit So far

The tools using thus far are:

  1. Excel/VBA
  2. VBScript/WSH
  3. UltraEdit Studio
  4. Beyond Compare
  5. Notepad++
  6. Kompozer
  7. CoffeeCup Html Editor
  8. WAMP

Kompozer comes closest to replacing the Visual Studio 2005 editor, which I previously used for website development. Ultraedit is my main editor, however in the transition from Windows XP to new computer with Windows 7, I got used to Notepad++ until I transfered my Ultraedit license across. CoffeeCup Html editor was one of the first html editors I used many years back, at that time I didn’t like it, as it appeared to have its own proprietary file format, and html files if any only created when uploaded to website. However it now seems to work directly with html files, and provides assistance with html tags and attributes. It seems a good editor but I haven’t spent much time using it, I just make use occasionally when need help with style attributes when writing posts: to do things I cannot do directly in the wordpress visual editor. Mostly for that purpose I use kompozer, and mainly edit in Ultraedit, though increasingly Notepad++: just developed a habit of opening in Notepad++ and not got back to using Ultraedit. Whilst Notepad and Ultraedit have similar capabilities I still prefer Ultraedit for somethings, not the least of which I know where the command is, and its already built-in and doesn’t require downloading and installing a plug-in. Then again I prefer the highlighting capabilities of Notepad++ when it comes to html tags, I only have Ultraedit V10, so not sure if current version can do similar.

Beyond compare is my preferred file comparison software. It is useful for comparing theme files. For example copy parent theme style.css file to child theme, then edit and change some properties, then use file compare, to delete anything which hasn’t changed, so that can collapse and simplify the child theme css file. Similarly compare page.php with single.php, along with index.php, and likewise compare against plain html equivalents.

Progress Thus Far

Thus far identified the main css style containers used by Sketchpad and underscores, and created simple html files displaying all the nested boxes with some simple styling focused on highlighting  the nested boxes. That is the styles not concerned with actual layout, just making the containers and their nesting apparent. I have also replicated this format in Excel worksheet. I’m not entirely sure that I have got the containers correct, each time I look at the orginal php files I get the impression i have got some part of the nesting incorrect. Or wonder how any of the original php theme files can possibly work: the problem is that html tags are opened in one file and closed in another file, or not seemingly closed at all.

So thus far, I have 20 theme experiments. The first 9 are stepwise increments of developing the first project in Jacobs book mentioned above. The others cover the rest of the projects and also the chapters of McCollins book. Then I have theme using underscores, and another with wordpress+bootstrap starter theme, a tutorial on bootstrap and wordpress I found on the net.

I also did more searching and found the following useful resources:

  1. WordPress Default CSS Styles
  2. Methods for Overriding Styles in WordPress
  3. WordPress 101: Create a Theme from Scratch

The WordPress 101 site, I found whilst trying to fix  the search form presented in Jacobs book. Also Jacobs book is missing examples of navigation through the posts: it provides navigation from blog listing to single post, but not how to get from one screen/page of posts to the next.

Other websites/pages found useful are:

  1. W3 Schools (HTML, CSS, Bootstrap, PHP )
  2. php Manual
  3. WordPress Theme Developer Handbook
  4. Color Blender (Creating a colour pallette graded between two extremes)
  5. Lorem Ipsum (dummy text)

The wordpress theme developer handbook starts becoming more useful once get a start on what you need to be looking for.

So I was aiming for some quick fixes to the current Sketchpad theme, by creating a child theme and changing all the fixed pixel widths to percentages. But all that has achieved thus far is create a mess. Likewise changing the colours of the theme is not an easy task as the appearance is heavily dependent on matching image files to create the appearance of a paper sheet and spiral bound book. So need to mess around changing colours of image files, not sure that is productive. Also not sure the concept can be adapted to presentation on a mobile phone: it would be wasting screen space. On a desktop screen don’t want to use full screen, so it looks good (well I like it), on a mobile phone want to use as much of the limited screen size for information. So given complexity of modifying Sketchpad, the situation favours developing a new theme. Just not so sure whether to use underscores or some other starter theme, also not sure about using bootstrap,given the following article: Why Bootstrap is a bad fit for WordPress Themes. It does seem that underscores on its own can provide for a responsive design, the horizontal bar menu does collapse to a button.

So for the moment its continued experimentation. I have the wordpress loops I want, one for blog posts, and one for the shop. I just have to come up with ideas for presentation and see what is the easiest way to implement, minimum use of CSS or use Bootstrap or Foundation. Thus far opted for bootstrap as its documentation is clearer about options not needing SASS or LESS. So whilst foundation is apparently smaller, it seems to require tools I haven’t got set up. I have opted against the use of W3.CSS because that seems to be dependent on an external website, and so requires I am online whilst developing.

On with Developing the Theme

So at the present time not just a matter of developing a theme but also developing suitable tools, and templates for the task at hand.

So I don’t intend on replicating the contents of the books I have used or writing yet another blog post to add to the many already out there. I will however document my progress and release the staged experimental development files, along with any scripts and other tools I may develop to get the task done.

Hey! I’m a technologist, a real technologist. It’s my role to design technology whatever form it may take, and design the tools needed to build the technology along with any required infrastructure. Not just a number crunching hack technician.

So next step automatically rip starter theme files apart. The main theme files being:

  1. style.css
  2. index.php
  3. functions.php
  4. header.php
  5. footer.php
  6. single.php
  7. page.php
  8. search.php
  9. sidebar.php
  10. 404.php
  11. archive.php
  12. comments.php
  13. content.php
  14. content-page.php
  15. content-search.php

There are others but these are the main ones which come with underscores. With the exception of functions.php all of these files can be initially created as plain html files, independent of wordpress, and then converted to php. The underscores website also generated these theme files: so there’s a clue and first step towards automatic theme generation by none other than AUTOMATTIC.

I’ve crossed comments out as I have little interest in comments, I believe comments best left to the social networks rather than littering blogs. I hate visiting websites and having to wait for a short article to load delayed by thousands of irrelevant comments. A blog is the place a person gets to have their say without interruption. A forum is the place to debate an idea. So I won’t be intentionally adding comments any time soon.

Apparently comments are good for search engine optimisation (SEO): if so then the search algorithms are flawed, because as I said most of the comments tend to be irrelevant to the original post. Search engines are not real search engines and do not have real knowledge graphs: they are mostly just playing a silly popularity contest which may be good for marketing and sales, however it’s hopeless for real enquiry. Big data just leads to flawed conclusions because its not real world data, it’s just lots of biased data not truly random. So if comments put something to top of search results, the blog may well be popular, or current, it doesn’t mean its useful or any way informative.

I’m not really interested in SEO, more interested in how to find the needle in the haystack, and how to create the equivalent of the high street. For I can walk along the high street for no reason at all and discover the shops which are in my local area. The shops away from the high street are something of a mystery, either expend energy getting to the store or waste time on the phone. Websites can resolve a lot of logistics problems for business, if can resolve the logistics of people finding the website.

SEO is about how to tweak the website to get it to bob up in the search results. Whilst I’m more interested in having a search engine I can tweak to find the results I seek. So if wish to ignore the popularity vote I should be able to  switch that criterion off. I should be able to create a segment of a knowledge web and search for that segment. Not just a list of keywords, but a connected list of words with ranked importance. SEO may be important with respect to location, and knowing your shop is in the local town. But that shouldn’t require any special effort, as providing address on website should be obvious if service needs to be provided from local store. But then naming homepage something other than “home”, doesn’t appear to be obvious for some of the largest ,multinational corporations.

Which is the point of developing own website. If the web developers working for large multinationals cannot get it right, why should small business pay thousands of dollars to get a website designed and built? Not the least of which web designers and developers seem to be a temperamental lot. Clearly the client needs to be involved with developing the website, they cannot just have something thrust upon them. In terms of buildings for example, one reason people tend to prefer building designers over architects, is because people perceive architects as people who want to implement their own dream rather than that of the building owner. Architects are all into intellectual property rights, and corrupting their vision. So finding the right person to assist can be a problem: and hence growth in DIY and owner-builders. But really it’s just the people regaining freedoms they had in the first place, before professional cults started to interfere and take such freedoms away.

Anycase I’m taking a tool based approach to wordpress theme development, because that’s what I do, I create tools to do the job: whatever the job happens to be.

So actual theme development will come later.

 


Revisions:

  1. [24/04/2018]: Original [First Draft]