Fix: WordPress administration UI content area showing up blank

Some time ago, at a WordPress 3.3 blog, a friend was getting a blank main area at the administration UI (just the menu was showing up there) when they visited the classic URL of the form http://somesite/wp-admin/. Here is a writeup of some notes I had kept while troubleshooting that issue and then upgrading to newer WordPress, with updated theme and plugins.

Visiting the problematic admin UI page online, I right-clicked and selected View Source in the browser and browsed to the bottom of it where it was showing: 

That div tag wasn’t not closed with a matching closing div. Obviously some PHP code that was outputing that tag failed at that point.

For starters, I copied all files via FTP (with the FireFtp Firefox plugin) from the remote server locally (into my Dropbox). Useful for backup too in case I messed up something.

Could use grepWin tool (http://stefanstools.sourceforge.net/grepWin.html) to search all locally copied php files for “contextual-help-sidebar” and see which one was outputing this (if that string was assigned to some variable could then search again where that variable was being used).

However, WordPress also has debugging mode, so I edited wp-config.php and uploaded the edited version to the server replacing the old file. I changed WP_DEBUG setting to true below: 

 

At the problematic admin UI online page again, I right-clicked and selected View Source in the browser and browsed to the bottom of it, this time reading:

This led to indentifying the exact place in the PHP code that was causing this issue:

So, I commented out the buggy PHP code, converting it to an HTML comment block instead of a PHP block:

and the admin UI was working again after I pressed ENTER at the address bar again to refresh the admin UI (http://somesite/wp-admin/) and it was not showing up fine (F5 function key didn’t seem to really refresh the site when using Firefox btw, probably some caching issue).

Then installed (the free version) of the WP Database Backup plugin for WordPress:

http://www.wpseeds.com/documentation/docs/wp-database-backup/

by searching for “Backup” at

http://somesite/wp-admin/plugins.php

and evaluating the different backup plugins listed there (judging from both their votes and by checking out if WordPress wasn’t saying at the details page of a plugin that it hasn’t been tested with that [old] 3.3 WordPress version that was on that site) and backed up from Tools/WP-DB Backup menu:

http://somesite/wp-admin/tools.php?page=wp-database-backup

Then Downloaded the MySQL backup (.sql) file, so now I could update Themes, then Plugins, then update WordPress to new Core from

http://somesite/wp-admin/update-core.php

Did keep copies of the wp-content/themes and wp-content/plugins folders before and after updating them of course.

After WP updated, it asked to update the DB, all went ok

Then did backup up again the database via the WP-DB Backup tool and went again to

http://somesite/wp-admin/update-core.php

and installed an update for one of the plugins (can also do update per-plugin from http://somesite/wp-admin/plugins.php)

Then backed up again every file (db not included there) via FTP and done.

HowTo: Use MEF to implement import/export etc. plugin architecture

Copying here my comment at a discussion on the GraphX project:

https://github.com/panthernet/GraphX/pull/15

in case it helps somebody in using MEF (Managed Extensibility Framework) in their software’s architecture

——–

Using static classes instead of interfaces can mean though that you need to use reflection to call them (e.g. if you wan to have a list of export plugins).

Instead can keep interfaces and make use of MEF to locate import/export and other plugins (you can have some class attribute there that mark the class as a GraphXExporter and MEF can be asked then to give you interface instances from classes that have that attribute.)

see usage at
http://clipflair.codeplex.com/SourceControl/latest#Client/ClipFlair.Windows/ClipFlair.Windows.Map/MapWindowFactory.cs

//Project: ClipFlair (http://ClipFlair.codeplex.com)
//Filename: MapWindowFactory.cs
//Version: 20140318

using System.ComponentModel.Composition;

namespace ClipFlair.Windows.Map
{

  //Supported views
  [Export("ClipFlair.Windows.Views.MapView", typeof(IWindowFactory))]
  //MEF creation policy
  [PartCreationPolicy(CreationPolicy.Shared)]
  public class MapWindowFactory : IWindowFactory
  {
    public BaseWindow CreateWindow()
    {
      return new MapWindow();
    }
  }

}

and at
http://clipflair.codeplex.com/SourceControl/latest#Client/ClipFlair.Windows/ClipFlair.Windows.Image/ImageWindowFactory.cs

//Project: ClipFlair (http://ClipFlair.codeplex.com)
//Filename: ImageWindowFactory.cs
//Version: 20140616

using System.ComponentModel.Composition;
using System.IO;

namespace ClipFlair.Windows.Image
{

  //Supported file extensions
  [Export(".PNG", typeof(IFileWindowFactory))]
  [Export(".JPG", typeof(IFileWindowFactory))]
  //Supported views
  [Export("ClipFlair.Windows.Views.ImageView", typeof(IWindowFactory))]
  //MEF creation Policy
  [PartCreationPolicy(CreationPolicy.Shared)]
  public class ImageWindowFactory : IFileWindowFactory
  {

    public const string LOAD_FILTER = "Image files (*.png, *.jpg)|*.png;*.jpg";

    public static string[] SUPPORTED_FILE_EXTENSIONS = new string[] { ".PNG", ".JPG" };

    public string[] SupportedFileExtensions()
    {
      return SUPPORTED_FILE_EXTENSIONS;
    }

    public BaseWindow CreateWindow()
    {
      return new ImageWindow();
    }

  }

}

then at
http://clipflair.codeplex.com/SourceControl/latest#Client/ClipFlair.Windows/ClipFlair.Windows.Base/Source/View/BaseWindow.xaml.cs

to get the first plugin that supports some contract (I get that contract name from the serialization file [using DataContracts]) for a loaded view, or that supports some file extension for a file dropped inside a component, I do:

    protected static IWindowFactory GetWindowFactory(string contract)
    {
      Lazy<IWindowFactory> win = mefContainer.GetExports<IWindowFactory>(contract).FirstOrDefault();
      if (win == null)
        throw new Exception(BaseWindowStrings.msgUnknownViewType + contract);
      else
        return win.Value;
    }

    protected static IFileWindowFactory GetFileWindowFactory(string contract)
    {
      Lazy<IFileWindowFactory> win = mefContainer.GetExports<IFileWindowFactory>(contract).FirstOrDefault();
      if (win != null)
        return win.Value;
      else
        return null;
    }

Fix: Enable Silverlight & other NPAPI plugins at Chrome web browser

Below I’m elaborating a bit more my related tweet:

#Fix #Silverlight & other #NPAPI (Netscape #Plugin API) at #Chrome Go to chrome://flags/#enable-npapi and click Enable, Close/Reopen browser

— George Birbilis (@Zoomicon) May 13, 2015

 

Showing below the easiest of the suggested solutions that I found in this page

 

At Chrome’s address bar you type:

chrome://flags/#enable-npapi

and press the ENTER key on the keyboard

Then you should see a page Chrome generates to change some of its internal settings. When NPAPI is disabled the respective entry should appear in grey background like below.

Press Enable at the setting “Enable NPAPI Mac, Windows”

After enabling NPAPI the page should look like this (with the respective setting in white background):

After enabling the NPAPI option, close the Chrome webbrowser and reopen it.

 

You can then test if Silverlight is working by visiting for example

http://studio.clipflair.net (ClipFlair Studio Foreign language learning application) or http://zoomicon.com/amnesiaofwho (Amnesia of Who memory game)

 

Btw, Chrome also is available as a Windows 8 app, in which mode it probably doesn’t support plugins at all, so if you’re running it on Windows 8 and see it always full screen inside a scrolling container, use the Chrome menu from the top-right of its window and select the option there to switch to the desktop version of Chrome instead (should say "Relaunch Chrome in desktop mode")

HowTo: Open page from Internet Explorer (Metro) app into desktop IE

The Windows 8/8.1 app version of Internet Explorer is also known as IE Metro because of the “Metro” codename (inspired by navigation signs in public transport] of the Modern UI design language promoted by Microsoft).

However that version isn’t the full Internet Explorer, in that it is unfortunately not supporting extensibility via plugins in the form of ActiveX controls as the classic (desktop version) of IE. It is only embedding the Flash player engine directly in its codebase, but not Microsoft’s own Rich Internet Application (RIA) rendering engine aka Silverlight, nor Unity or other VRML/X3D, QuickTime/QuickTimeVR etc. plugins.

Browser pages cannot detect the difference between running IE on the desktop or as an app, there is however a workarround for webpage authors or webadmins to force the app version of IE to show a prompt to the user that allows the opening of a page in the desktop version of Internet Explorer. There is also a way for System Administrators to set specific sites to open in the desktop version of IE without the user seeing such prompt.

At https://msdn.microsoft.com/en-us/library/ie/hh968248.aspx, Microsoft mentions:

As a web developer, you can enable the requiresActiveX feature switch either by using this HTTP header:

X-UA-Compatible: requiresActiveX=true

Or by using this meta element on each affected webpage:

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>

 

I just added the meta tag inside the <head>…</head> block of the Amnesia of Who web version that uses Silverlight and here is how it shows in the IE Metro version (note that Silverlight IS installed in that Windows 8.1 machine, it’s just that it’s not available in that browser, that’s why the Silverlight installation prompt is also shown):

When the user presses the default button “Open on the desktop”, the OS switches to classic desktop mode and shows an Internet Explorer window with the Silverlight application starting fine (or if Silverlight is not installed it will prompt and allow the user to install it – note that Silverlight ActiveX control’s installation doesn’t need administrator permissions since that installation doesn’t affect other users, nor requires any elevated rights in the system to work).

 

I hope that Microsoft, apart from keeping on supporting this workarround, will do a clever move this time and embed Silverlight too (apart from the Flash engine that was in IE Metro) in the Spartan browser that it prepares as the Windows 10 default touch browser. And why not, provide some extensibility method for it, since HTML5 cannot become a huge, impossible to implement beast, that covers every future conceived functionality for the web.

HowTo: Check your web browser and plugins for needed updates

Qualys BrowserCheck will perform a security analysis of your browser and its plugins to identify any security issues. You can install it at https://browsercheck.qualys.com/

 

Another useful quick online tool (needs no installation) for checking that you do have the latest in web browser technology is Browse Happy, at http://www.BrowseHappy.com

HowTo: Tell AddThis to not append tracking suffix on addressbar

ClipFlair’s project description website is based on WordPress (a quite extensible blogging platform based on PHP). The other day we had an issue with the AddThis Plugin for WordPress, which was adding tracking suffices (in the form #.UAxxxxx) to the end of our URLs on the browser address bar.

Moreover this wasn’t occuring in Internet Explorer, since it doesn’t support the History API – probably for more security against Phishing scams – that the AddThis plugin uses for its Address Bar Shares tracking feature.

At first I didn’t spot that setting at the Settings/AddThis menu in WordPress dashboard and was looking into configuring it manually (it’s “addthis_addressbar” boolean setting, probably kept in wp_config.php), but eventually our designer spotted it at the “Advanced” tab there (wonder how I missed that 2nd tab altogether in the first place).