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

Ok! in part 1 , I waffled on about the aggravation of finding a theme and otherwise trying to customise by child themes. As indicated I am not about to add to the posts already out there showing how to build a theme, or replicate the content of the books I mentioned. I’m taking a different approach, and that is wordpress is just a front-end to manage a database. To see the database we can log into phpMyAdmin, there we can see the multitude of tables used by wordpress and the additional tables used by plug-in’s, such as those tables created by woocommerce. We can scan through the tables and see the data fields each table has. Alternative to looking at the tables used by wordpress, we can export the website to an xml file via the wordpress dashboard. This xml file can then be viewed using XML Notepad, or the file can be ripped apart into individual blog posts, and otherwise summarised using my Excel wordpress tools workbook (NB: Its free, if type $0.00 into the amount field)

Working with the exported xml file is a safe way of processing information held in the wordpress database, but not necessarily convenient. It’s certainly no use for displaying a report to a user online, nor any use for getting information from a user and then have the computer perform a task and report a solution. Now if want an interactive environment for visitors, could throw wordpress aside and build an application from scratch. However chances are that such website would still require an informative blog, for which purpose wordpress would be useful and therefore, given that wordpress is there may has well get the most from it.

To start with the wordpress database is not in the same place as the website, and the database is password protected. So certainly don’t want to be writing a php application which makes the password visible to the world. Hopefully wordpress as already figured out how to secure the files and folders which may directly access the database, so we, I don’t have to worry too much about such things. So instead of interacting with the database directly using php, I will interact with the database indirectly using wordpress functions.

So to do some experiments need a working environment: well actually 3 different environments.  The environments required are:

  1. A local install of wordpress. (eg. using WAMP or similar)
  2. A simple website which can use php (again using WAMP)
  3. A desktop folder for working on html and css files

It is not necessary to run WAMP to work on simple html and css files, these files can be edited and run in a browser working on a normal desktop environment. WAMP or similar is required to run php scripts, and since wordpress is written in php WAMP is also required to run wordpress locally on a desktop. Scripts written in php can be run from the Windows command line or from the browser. Running from the command line avoids the need to start WAMP.

Having got the environment set up, can then start to experiment. The starting experiments come from the trials presented in Jacob’s book mentioned in part 1. Jacob’s presented the trials as a series of steps, as part of an ongoing exercise to build a simple theme. I set up each progressive trial as a separate experimental theme. So to work with wordpress need to be in the wp-content/themes folder. The following is an example of themes folder with several themes installed. The current exercise involves themes Experiment00 to Experiment20: a rapid run through of project 1 in Jacobs book, using the files I created working through the book, with some extension exercises/experiments.

wordpress themes folder
wordpress themes folder

Experiment00

The first exercise is to just create an empty folder Experiment00, then go to the wordpress admin, appearance themes and see what is reported. It should report that there is a broken theme due to the stylesheet being missing.

wordpress broken theme
wordpress broken theme

If I then add the following blank files to the folder:

  1. style.css
  2. index.php
  3. screenshot.png (a valid blank image file)
wordpress blank theme
wordpress blank theme

The error goes away and the theme is shown in the theme list, with a blank screen shot. The theme can be activated, and if visit the site, will just get a blank page, because the blank theme files don’t provide anything to do.

Download: Experiments00

Experiment01

For experiment01. Create a new theme folder Experiment01, add the necessary information to style.css to provide a description about the theme, and also add a indicative screenshot, but leaving index.php blank. The theme can be activated, but once again if visit the site, it is blank.

Experiment01 Theme
Experiment01 Theme
wordpress Theme Experiment01
wordpress Theme Experiment01

Download: Experiment01

Experiment02

Create a new theme folder Experiment02. Once again create or copy the three basic files. This time add phrase Experiment 02 to the index.php file. Activate the theme and visit the site. Instead of a blank screen should display the phrase “Experiment 02”. We would get the same result if we typed the path to the file directly into the browser. Similarly if I copy the file to a new file: junk.php, and then type its path directly into the browser. If I type the path to the folder only, then I get a list of files: index doesn’t automatically run. So wordpress not currently relevant to the exercise.

So check out the simple website. For which I just created a folder called simple, under the www folder of WAMP installation. Here copy the index.php file, and then type the folder path into the browser. Once again just get a file listing. If add the filename (index.php) to the path, then the php script runs. So nothing special with index.php, unless there’s an error with my WAMP installation. {Which probably is, as it doesn’t know the time of the day Not a time zone issue, it just isn’t returning any time.}

Any way, if we know the file name and can access the folder then can execute the script. I believe that index.php, is special and should autorun if its present in the folder. The thing I just did wrong was provide the Windows system filepath, not the WAMP path. Adjusting path to localhost/simple, then index.php does run without need to provide its name. Similarly if reference the wordpress themes folder, then index.php runs.

Download: Experiment02

Experiment03

Create Experiment03 theme folder. Copy files from previous theme over to current theme and modify. This part of the exercise the index.php file is extended with some html, and calls to the wordpress database using the wordpress function bloginfo(), some simple css rules added to style.css. Once again activate the theme and visit the site, and see what happens. Jacobs takes two steps at this point. The first to illustrate that the stylesheet isn’t being read, then step 2, to show how to include the stylesheet. If the stylesheet is included, which it is in the download, then get a black screen: and no information.

But try another test. Not interested in the html, so rip all that out, and just have plain php, call it test03.php. If I call this file then I get an error: ( ! ) Fatal error: Call to undefined function bloginfo(). So definitely need to be visiting the site via wordpress, so that it has the definition of the function. But do I need html?

Yes and No! Since the php echo and print statements do not output linefeeds to the browser window, the text isn’t so easy to read.

Download: Experiment03

Experiment04

Create Experiment04 theme folder. This introduces the wordpress loop, checking for posts, and identifying whether any posts available or not.

Download: Experiment04

Experiment05

Create Experiment05 theme folder. Now start to display a listing of posts or a single page: depending on how the website is setup.

Download: Experiment05

Experiment06

Create Experiment06 theme folder. Here there is no change to the data or the appearance, the theme is now however split into additional files.

  1. style.css
  2. header.php
  3. index.php
  4. footer.php

For which index.php is still the driver. Each of these files can be typed into the browser address bar to see what happens. Similarly can copy these files so the simple website, and see what happens if they are called. Note that the html in these files spans across the files, html tags are opened in the header.php and closed in footer.php. If mixing html and php isn’t a big enough mess, spanning a single html page across multiple files can get confusing quickly. The typical recommended work process is to start with a single index.php file and then break it up into multiple files. However if trying to develop a child theme, then the parent theme is already a divided confusing mess: and may need to try and put it back together as a single file.

Download: Experiment06

Experiment07

Create Experiment07 theme folder. More styling and features added, and the wordpress admin bar displayed. Now the files increased to:

  1. style.css
  2. header.php
  3. index.php
  4. footer.php
  5. single.php
  6. functions.php

The functions.php file is added, so that post thumbnails can be included in the theme. Additionally a separate template for single post is included. This allows the main blog listing to only show excerpts whilst the single post shows the whole post content. So thus far database access is using:

  1. have_posts
  2. the_post
  3. the_title
  4. the_permalink
  5. the_author
  6. the_date
  7. has_post_thumbnail
  8. the_post_thumbnail
  9. the_excerpt
  10. the_content

None of which has required a need to use SQL or directly reference the database.

Download: Experiment07

Experiment08

Create Experiment08 theme folder. Navigation menus added to the theme, and new template added for pages.

Download: Experiment08

Experiment09

Create Experiment09 theme folder.  Widgets are added to the theme. This is the end of project 1, as given in Jacobs book: if buy the book then can also download the source files for each project. Here is my variation of project 1, mainly I have the widgets shown in different places: and I have the container and main classes nested the opposite way round.

Download: Experiment09

Experiment10

This I created for project 2. It extends the theme files to:

  1. style.css
  2. header.php
  3. index.php
  4. footer.php
  5. single.php
  6. front-page-php
  7. page.php
  8. page-contact.php
  9. search.php
  10. searchform.php
  11. archive.php
  12. comments.php
  13. company-template.php
  14. content.php
  15. content-aside.php
  16. content-gallery.php
  17. content-image.php
  18. content-link.php
  19. content-quote.php
  20. content-status
  21. functions.php

or at least that’s where I left it.

Experiment11

This is for project 3: which uses W3.css.

Experiment12

This is for project 4: which uses bootstrap.css

Experiment13

This is for project5: which uses foundation.css

Projects 2,3,4,5 I didn’t create any staged experiments.

Experiment14

Moves onto the book by McCollin and Silver, this uses layout-core.css. Its at this point that it becomes apparent that wordpress is not needed in the initial stages. Start with html and map out the different pages, then apply style rules.

Experiment15

Continues with McCollin and Silver’s book.

Experiment16

Continues with McCollin and Silver’s book.

Experiment17

Continues with McCollin and Silver’s book.

Experiment18

Continues with McCollin and Silver’s book.

At this stage not done any experiments with McCollins book, rather than work through the book, I just copied the source files into the themes. Where on experienced problems with the menu hiding everything. When shrink the screen the navigation menu shrinks, and then shrink the screen a bit more, and the menu expands back out again. So something seems to be wrong with layout-core.css: probably needs updating or the media query logic needs revising.

Experiment19

Uses WP Bootstrap Starter theme.

Experiment20

Uses sketchpad as a starter theme, not so that I can create a new parent theme derived from sketchpad, but so that I can create a child theme. It is easier to modify the parent files, then use “beyond compare”, to compare files and cut down into a child theme.

Experiment

This doesn’t have any number, it is a starter theme generated and named using underscores.

wpbootstrap

Is another experiment and tutorial using bootstrap. The tutorial being available on team treehouse: How to Build a Responsive WordPress Theme with Bootstrap. With this I had problems with bootstrap.

Bootstrap

So hitting problems with bootstrap. I went and looked at w3schools.com tutorial on bootstrap. I didn’t have problems if I used their code. But if I attempted to work offline using locally installed version of bootstrap I encountered problems. Messed around with different versions of bootstrap, eventually got it to work. Various problems, such as wrong paths, lack of jquery.js, missing fonts, possibly differences in class names.

Next Stage: Step Away from wordpress

So working with starter themes and css frameworks, provides benefits on one hand and an inconvenience on the other. I attempted to match the style file created working through Jacob’s book by comparing with the style file from the underscores theme, and rearranging.

I could just stick with developing the simple theme started using Jacob’s book, but that isn’t responsive. The theme produced using McCollins book is meant to be responsive, but its broken somewhere. So that got me looking at the underscores starter theme, and the wordpress + bootstrap starter theme. The problem is figuring out the classes for each starter theme, and having figured out where the classes are applied, the next step is finding the style rules if any. Chances are there aren’t any style rules. Thus far I have figured out the following class nesting for underscores:

underscores container classes
underscores container classes

and in similar manner determined the basic layout for sketchpad: though it is actually more complicated as the sidebar overlaps the main content box, and it otherwise includes images to create the appearance of a spiral bound book. In short my attempts to modify the theme using a child theme just produces a mess.

sketchpad container classes
sketchpad container classes

With experiment 10 above, I moved forward and developed a static home page, showing posts from the blog and products from the web store (woocommerce ). Getting information from the wordpress database doesn’t seem to be overly complicated. Therefore whilst developing the appearance of the theme, wordpress and php can be kept out of the way.

Having boxes within boxes, within boxes seems problematic for a responsive theme. Also getting boxes to be a consistent size seems problematic. The size of the navigation menu seems a mystery. All of which tends to suggest using a css framework like bootstrap: the authors have hopefully solved some of the issues. But if using bootstrap then maybe don’t care about the classes assigned in the underscores theme: just ignore them and replace with bootstrap classes, or combine with bootstrap.

Any case I back tracked through experiments 01 to 09 and placed them in the simple website as ordinary html files, removing all the php. Additionally aligning the style.css file as best I could with underscores stylesheet. So basically can see what is missing and otherwise different.

Download: stage01 [html Experiments 01 to 08]

Download: stage02 [html Experiment 09]

Download: sketchpad [html experiments with sketchpad]

Download: underscores [html experiments with underscores]

NB: The Styling applied is purely concerned with identifying the nested boxes.

From here instead of creating the php files as listed in Experiment10 above, can start by creating html equivalents instead. The wordpress functions listed in Experiment07 above can be written in the html files as simple text reference markers: so that know that is where the data will come from when eventually convert to php. But first work with html and css to get the appearance right.

So from here I will merge experiments 9 and 10 into underscores. Once I’ve done that, I will merge the result into WP Bootstrap starter theme.

Additionally learn more about data which can be put into and extracted from the wordpress database using wordpress functions. For which purpose need a theme which is compatible with forms (input) and reports (output).


Revisions:

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