State of Play 2018/wk25

Experimented some more with php and css to create a new wordpress theme. As mentioned earlier Divi been giving me memory problems on each upgrade. I tried using Divi again yesterday (Tuesday), and I had to use phpmyadmin to change the theme as couldn’t get back to the wordpress dashboard. It maybe a plug-in conflict, I don’t however wish to waste time tracking down the conflict, as Divi is supposed to be just a theme: put simply I had but a one time only use for the builder, I don’t need such builder hooked into the main wordpress editor. It may also be a web hosting issue, but I don’t see why need to make more memory available for tools I don’t need all the time. Not to put too fine a point on it, but by education, amongst other things I am an Industrial Engineer: I don’t throw resources at a task I remove them: optimistically using half the resources to generate twice the output. So needing more memory is both unacceptable, inefficient and just plain dumb. {Though reading most IT blogs, have to update, upgrade, and otherwise use more resources: did your slide rule, pocket calculator, typewriter or wordpressor have daily security issue?}

Computer: purpose to compute. Not a multimedia globally connected entertainment centre.

Anyhow, at the beginning of the week had two main issues to fix before putting the theme online.

  1. Fix the sort order for the shop on front page
  2. Expand the number of levels the menu supports

Well maybe three if count the psychotic depressing colour scheme.

Dual Loops and Popular Products

Fixing the sort order of the shop. First problem was I couldn’t find the original blog post I got information about multiple wordpress loops and showing most popular products. I started messing with phpmyadmin tracking down the tables and fields. Turns out the data not stored in a specific data field but a general data field: its a metakey to the wordpress post, rather than data in the woocommerce tables. Messing/experimenting with SQL was able to get list of the metakey’s, but they weren’t sorting correctly in phpmyadmin. So went looking up bugs with phpmyadmin (PMA), apparently there were some: but eventually dismissed that as not being the issue. Going back to PMA and browsing through the data, it became apparent that the data was sorted, just not as expected. Then remembered it was general purpose data field containing text. So then went tracking down how to convert to a number using SQL: and thus got the sort order correct using PMA. Next to figure out how to do the same thing in wordpress using WP_Query.  That was to use orderby with value meta_value_num, and also to change the sort order from ASC to DESC. Not sure why sort order was ASC: but as I say I cannot find the original blog providing guidance.

Anycase on Monday I wasn’t expecting much success with this, and expected it would take all day, and likely something would have to abandon, and simply accept the wrong sorting. Instead however it was a relatively quick fix.

Multilevel Navigation Menus

The menu issue, I didn’t think was a problem in any case. I was aware that my development system in WAMP, had fewer levels to the menu than my actual website: but my understanding was the menu system could cater for that. I checked the depth parameter and it should have been able to cater for, but couldn’t. That posed a problem.

Research indicates that current version of bootstrap doesn’t support multilevel menus, just a main menu bar and single dropdown. There seemed to be a work around, smartmenus: but the download seemed to be a lot more than a single css file to add to the theme: so scrapped that idea. I had already scrapped the idea of using wp-bootstrap-starter: on the basis that it was not a true starter theme (as it will update and overwrite custom changes unless use a child theme): and opted for just using the bootstrap.css if possible. I choose not to use Foundation which was also mentioned in the theme development books I am using: the reason for this choice is that Foundation seems to require use of Sass and that therefore requires additional tools installation and setup.

Looking the wordpress plug-in development book I got, I also went through the process of setting up Netbeans for php. A bit confusing at the moment as the project still seemed to be pointing to my plane frame analysis project written in java. But then again, it was doing a lot of updating and it took several minutes before it finally recognised syntax errors in the php file: following the simple check of the installation suggested in the book. I guessing it was busy scanning the whole of wordpress. Anycase having got that setup I went back to using Notepad++.

The basic gist is that the default wordpress menu, supports multiple levels, and whilst underscores provides the toggle to the icon button when screen gets too small, the multilevel menus are not overly readable. The bootstrap menu is more usable on a small screen. There are other woak around and did find some techniques for achieving the requirements just using css, no need to use javascript. Thus far however I haven’t figured out how to merge into the wordpress theme. WordPress does assign classes: menu-item, and menu-item-has-children.  These classes however have no style rules defined in “underscores” starter theme. The navigation menu seems entirely styled by the class “main-navigation” and reference to appropriate html elements such as  “li” and “ul”. At present not sure whether should attempt to adapt the bootstrap menu, making use of the additional classes assigned by wordpress, or otherwise adapt the “underscores” menu.

So currently decided to stick with bootstrap menu, and accept the two level limit: the main bar plus single dropdown. It may be better in any case, though in researching found a variety of other menu styles: a menu with a a dropdown full screen width block of options may be most suitable for this site.

Colour Scheme

As for the colour scheme still working on that. Since maroon/magenta/purple has been the colour for the business name, since all the way back to the beginning of the business: even though seldom ever printed anything in colour it was there in the files. I thought I would start with varying shades of purple: further by locking the main colour down by its colour code, and not just eyeing the colour in with different software resulting in unwanted variations. In terms of the web the colour code is assigned the name purple.

To get colour grades I used the following website {which I’d link to If I hadn’t lost the link again}. There are multiple sites with colour schemes available, I like this site because it gives 12 grades, or a maximum of 10 points between two a start and end point. I wanted a new set of colours yesterday and went looking for the site again, and a saved the bookmark in xyplorer catalogue with other links being used for web development. Only either I cannot see it or I’ve lost it. Answer don’t know what I’m looking for: Color Blender.

I thought I use grades, as I was otherwise using random colours just to identify each of the regions which needed styling, or otherwise had classes and ids assigned either in underscores or by wordpress. Such classes and id’s typically have no existing style rules in the underscores style file.

The colour scheme is a bit dark at the moment, but will slowly change to a lighter background with darker highlights. Also noted that the graded colour scheme is somewhat distracting: suggesting maybe some problem with the screen (there isn’t a problem with hardware, just a bad colour choice). Though there is a screen/user issue: as the colour changes from top to bottom depending on viewpoint: which changes with tilt of the screen. This seems more an issue with dark colours than pale colours: so avoiding continuous vertical block of dark colours. If varying colours than more contrast seems to look better. (eg. In Excel using default styles Accent2: 20%, 40%, 60% with violet II colour scheme )

So colour scheme likely to change a few times over the coming weeks.

Theme MS Excel Workbook

Still working on MS Excel workbook to assist with creating child themes or using starter themes. So previously I wrote functions which could assign colours to block of cells containing hex values. So that could input the colour set produced by Color Blender, and then colour the cells. This week I wrote an additional routine which creates Excel styles: style01 to style12. These styles are created by highlighting a block of twelve coloured cells, the cell colour is assigned to the styles colour. Thus by using these twelve styles I can quickly change the appearance of a webpage laid out in a worksheet, rather than using the default Excel themes. Quickly, being relative as the subroutine runs slowly: I was going to track down code to switch various update features of Excel off: not done so yet as from memory it makes no difference when changing styles. {Which Suggests I need to update my vba skeleton code, so I don’t need to go track the code down from last place I used it}

Discovered need to modify my vba routines to be able to rip more files apart than the header, footer and index files, need to be able to work with content files and various other files. Currently it can convert either an index file to html, or the index with header and footer files included. The point of converting to html is that I can edit and develop the desired theme layout without need to run WAMP.

Side Widget

Working through the two theme development books mentioned in earlier posts I have two additional widgets which as yet not implemented in the layout of the theme.

At present I have removed the sidebar widget. Though it seems I could have saved some time, by placing woocommerce shortcodes in a sidebar widget: rather than creating a theme file for the front page. Such approach would place a reference back to the store on every page. There is space for such approach as neither the blogroll or an individual blog post requires the entire width of the screen, and it is more readable if width is made smaller. Using a sidebar is how I have blogger setup: so may shift from the footer to the side. It’s easier to stack things in a sidebar, where as footer starts getting too long if stack too many items. So as I have on blogger sidebar with links to useful external sites would be possible.

Final appearance still a work in progress: and one less update by others wasting my time. The main thing at the moment is that it should now be accessible on my mobile phone. (Which apparently it isn’t: My phone has reverted back to cannot find ip address. Which I thought I had fixed several weeks back. Then blink, get help instead of settings, and instead of clearing cache get back to browser tab,  website appears. And its more pink than purple)

Browsers and Mobile Phone

So been testing the website mostly offline using WAMP. Whilst testing largely using Chrome in incognito mode to view the site, whilst wordpress dashboard open in chrome using normal mode. The site seems to display ok. But upload to actual website and get large vertical space below the footer (a screenfull). Since now in habit of clicking view site in incognito mode, its this mode that seeing the space. I try chrome in normal mode and the space doesn’t appear.

Now looking at on android phone, there is about a half a screen height of vertical space below the footer. Earlier on I attempted to fix by removing styling from the body element: but has made no difference. Also check for 100% height settings and don’t have any. So not sure where this space is coming from, most blog posts I could find on similar problems are concerned with individual blank lines, padding and margins and height settings.

So something need to track down. Just pressed contact on menu on phone, and website disappeared and not reachable again. (getting to my website on my phone has been a problem since I had problems getting my SSL certificate renewed earlier this year.)

So having work done around the house, and power switched off: whilst power off attempted to fix phone: no progress. If I recollect now, I fixed it last time by installing ccleaner, but I recently uninstalled it, so may need to put it back (and it seems keep it installed. [Reference note: chrome://net-internals/#dns no real help] ).

Additionally returned to site, and have large vertical space below the footer. So issue not entirely difference between chrome modes, but partly to do with whether wordpress logged on or  not. Which may have something to do with the plug-ins. One plug-in I’d like to get rid off is that which fixes issues concerning mixed content with SSL certificate.

May have to get the premium version of the plug-in, clean the website and then uninstall. Then again whilst looking for CSS code for menus, found website with useful information for transitioning to SSL. If work through this: How to Move HTTP to HTTPS on WordPress, then may be won’t need the plug-in. Though the mixed content problem results from linking to other sites without SSl certificates. The plug-in fixes the issue, on delivery of the webpage, whilst really want to create appropriate links in the first place: by having the wordpress editor, link tool create relative links rather than absolute links (sure I can manually edit at the time of creation, but not all that convenient working in a narrow box: and doing so interrupts the flow of writing: thus editing becomes an extra editing stage after finished writing.)

Anyway problems aside I can now revise the theme files, and the appearance of the website without logging into wordpress. I guess I should also check appearance in browsers other than chrome, except they don’t figure that high with visitors: so beneficial but not a priority.

Status as of Friday

So did further investigation, and thus far:

  1. Failed to regain access to website via android phone. Tried flushing chrome DNS and otherwise clearing data, and switching on/off. Phone is switched on/off everyday so according to theories about doing so,  my DNS should be reset everyday (if not several times a day). Currently waiting for battery to charge and phone in airplane mode. I did reinstall ccleaner, but couldn’t see anything about DNS, so after running uninstalled again.
  2. The large mess at bottom of website, turned out to be an image file, and tracked this down to jetpack statistics. So no problem using WAMP because statistics are switched off, as wordpress/jetpack will only run in developer mode (if no dot in URL).

Solution to the image problem discussed in the following articles:

  1. How to Hide the WordPress Stats Smiley the Right Way
  2. Automattic Stats for self-hosted WordPress

A search of installed themes, I have been testing, indicated that only a few have css code to hide the image, most have correct code others have the code advised to avoid. The css code doesn’t however seem necessary with current version of jetpack as there is a setting in jetpack itself to hide the image file: thus far it seems to work.

Other curiosity is that the html code for the image is visible using chrome developer tools and inspect, but it is not visible if view source. If save the page however the code will be found in the html file.


Revisions:

  1. [20/06/2018]: Original
  2. [22/06/2018]: Status as of Friday