Writing to the Google Chrome console from PHP

Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.
Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.

This afternoon I finally got round to figuring out why my workaround for changing the Divi projects custom post type to anything you want had broken in Divi 2.5.

In the end it was deceptively simple. I’d set the priority values for the add_action($hook, $function_to_add, $priority) and remove_action($hook, $function_to_add, $priority) functions too low.

WordPress uses the priority value to determine in which order particular actions are run. The default value is 10. The higher the value, the later it will be executed.

While I was investigating this, it crossed my mind that it would be really useful if I could write values to the Google Chrome console in the same way that you can when writing and debugging JavaScript.

It turns out you can, using Chrome Logger plus the ChromePhp library.

With the Chrome Logger extension installed and enabled on the tab I wanted to write to, all I had to do was include the library and log some data. Like this:

<?php
    include 'ChromePhp.php';
    ChromePhp::log('Hello console!');
    ChromePhp::log($_SERVER);
    ChromePhp::warn('something went wrong!');
?>

Very useful. And as well as a library for PHP there are also libraries for

  • ColdFusion
  • Go
  • Java
  • .NET
  • Node.js
  • Perl
  • Python
  • Ruby

You can find details on the Chrome Logger website.

 

New website for Pittenweem Properties

Pittenweem Properties: self-catering in the East Neuk of Fife
Pittenweem Properties: self-catering in the East Neuk of Fife

Over the last few months in the evenings and at weekends, I’ve been working on redesigning the Pittenweem Properties website for friends here in Anstruther. The site launched a couple of weeks ago.

Pittenweem Properties offers high-quality self-catered holiday accommodation and property management services in and around Pittenweem. They currently manage properties in Carnbee just outside Anstruther and Pittenweem. But their portfolio is growing and for good reason — the properties they own and manage are to a very high standard and in a beautiful part of Scotland: the East Neuk of Fife.

WP Booking System

The site was quite fun to build.

We used Trello for communication and project planning, WordPress (of course!) as the content management system, and the Divi theme from Elegant Themes which allowed me to very quickly design and build the site. I also changed the built-in projects custom-post-type to properties using the method I blogged about in March: changing the Divi projects custom post type to anything you want.

For the booking calendar we turned to a premium theme: WP Booking System which we found intuitive and offered most of the features we needed:

  • Multiple booking calendars.
  • Submit booking requests via form.
  • Display anywhere (on page or within widgets) using a shortcode.
  • Customisable display features, including splitable legend for check-in and check-out).

If this plugin had also allowed online payments, say via PayPal, then it would have been absolutely perfect but as it is we’ve been really happy with the functionality and usability of this plugin.

There is a free version of the plugin, but it offers only one calendar and has customisation limitations. The premium version costs only US $34 (approx. GBP £21.50).

Next…

While the site is now live there are still a few bits and pieces to do, such as keep an eye on analytics data and try to improve search engine rankings.

Websites are never really finished, are they?

It was a fun project to work on. Time to focus on optimising family finances and admin, and cracking on with writing my book.

Changing the Divi projects custom post type to anything you want

Now fixed for Divi 2.5

Clone this project on GitHub.

I’m currently building a website for a friend of Jane, using the Divi theme from Elegant Themes. The website is for a holiday property letting company. This post explains how I changed the built-in Projects content type to Properties, and how you can change it to anything you want.

The problem

Divi is a great theme to use: it’s very flexible, it’s responsive (so it works equally well on smartphones as well as huge desktop monitors), and it has the easiest, drag-and-drop editor that I’ve ever used for WordPress.

Divi comes with a built in content type called Projects; WordPress calls them ‘custom post types’. I use this content type on my own website to list the various projects that I’ve been involved in over the years.

As you can see from the WordPress admin menu ‘Projects’ appears on the list beneath Posts, Media, Pages, and Comments:

WordPress menu with Divi installed shows Projects
WordPress menu with Divi installed

Divi also ships with a number of attractive ways to display your projects using its Portfolio and Filtered Portfolio modules. You can even display these full-width or as a grid, such as this:

Demo of Divi's Filtered Portfolio module displayed as a grid.
Demo of Divi’s Filtered Portfolio module displayed as a grid.

These are exactly the features that I’d like to use on the property letting website:

  • Keep properties separate from pages and posts, using a custom post type.
  • Display all properties in a grid.
  • Allow users to filter properties based on the categories that are assigned to them.

So, I want all the features of Divi’s built-in Projects custom post type, but I don’t want them to be called Projects. I want them to be called Properties.

Use a child theme

First, I strongly recommend that you use a child theme when customising Divi (or indeed any other WordPress theme). A child theme inherits the functionality and styling of another theme, called the parent theme, and allows you to make local customisations to it which will not be overwritten when the theme updates.

Elegant Themes have a useful walkthrough on how to create a child theme, and why you should be using one.

The WordPress Codex also has useful information about child themes.

How to do it

This very useful post on the Elegant Tweaks blog: “Change Divi Projects URL-permalink” got me started, and about 95% of the way.

I copied the code, added it to the functions.php file in my child theme, and set about editing it.

remove_action / add_action

In a nutshell the code from Elegant Tweaks does two things:

  1. It defines a new function — called child_et_pb_register_posttypes() — that will redefine the characteristics of the Projects content type.
  2. It removes the default Projects custom post type contained in Divi, and replaces it with our one in the child theme.

This last point, I believe, is simply to be tidy: rather than clumsily overwriting the existing ‘project’ custom post type it gracefully removes the old one, and creates a redefined version in its place.

Labels

In that Elegant Themes post the author was only concerned with changing the URL from /projects/ to /photos/. So in his example, the names used in the WordPress admin screens still referred to projects: Edit Project, Add New Project, etc. But I want to change these too.

In the code for a custom post type these are referred to as ‘labels’ and are defined in the $labels array. This is what my code looks like now:

<?php function child_et_pb_register_posttypes() { $labels = array( 'add_new' => __( 'Add New', 'Divi' ),
    'add_new_item' => __( 'Add New Property', 'Divi' ),
    'all_items' => __( 'All Properties', 'Divi' ),
    'edit_item' => __( 'Edit Property', 'Divi' ),
    'menu_name' => __( 'Properties', 'Divi' ),
    'name' => __( 'Properties', 'Divi' ),
    'new_item' => __( 'New Property', 'Divi' ),
    'not_found' => __( 'Nothing found', 'Divi' ),
    'not_found_in_trash' => __( 'Nothing found in Trash', 'Divi' ),
    'parent_item_colon' => '',
    'search_items' => __( 'Search Properties', 'Divi' ),
    'singular_name' => __( 'Property', 'Divi' ),
    'view_item' => __( 'View Property', 'Divi' ),
);

 

As you can see, something I find useful is to list the elements alphabetically. Personally, I find it easier to work this way; your mileage may vary.

Obviously, if you are customising this for your own requirements simply edit this to reflect your needs.

Custom post type options

Next, we define the arguments to be passed to the register_post_type function. These define not only how the custom post type is used but also how it is displayed in the WordPress admin menu: where it sits and what icon it uses.

Slug

The most important option here, for our purpose of customising it, is the 'slug' key. You must set its value (in single quotes) to whatever you need it to be. In my case 'slug' => 'property'. I’ve highlighted this in the snippet below.

Just make sure you don’t set the slug to the same name as an existing page.

Menu icon and position

One useful new addition to the code provided by Elegant Tweaks are the options to set the menu icon and where it sits on the menu.

As these are properties I decided to use the home dashicon.

House icon
dashicons-admin-home

I also decided to move it up a bit, from beneath Comments to immediately below Posts. WordPress uses numbers to specify where custom post types should sit, e.g.

  • 5 — below Posts (this is where I want it to appear)
  • 10 — below Media
  • 15 — below Links
  • 20 — below Pages
  • 25 — below Comments

A full list can be found in the WordPress Codex.

So, here is the code I now have; I’ve highlighed these new menu options plus the ‘slug’ (how it will appear in the URL):

$args = array(
    'can_export' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'labels' => $labels,
    'menu_icon' => 'dashicons-admin-home',
    'menu_position' => 5,
    'public' => true,
    'publicly_queryable' => true,
    'query_var' => true,
    'show_in_nav_menus' => true,
    'show_ui' => true,
    'rewrite' => apply_filters(
    'et_project_posttype_rewrite_args', array(
    'feeds' => true,
    'slug' => 'property',
    'with_front' => false,
)),
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'custom-fields' ),
);

 

Register the post type

The next line now does the grunt work and registers this custom post type with WordPress.

register_post_type( 'project', apply_filters(
    'et_project_posttype_args', $args )
);

This tells WordPress to apply all of these options to the ‘project’ custom post type.

Because we are redefining this existing custom post type (by changing the URL, the menu labels, the menu icon and position) it means that everything else (the default project page layouts and portfolio modules) will work as expected without any further customization.

Categories and tags

The rest of the code I left untouched. This code defines the categories and tags to be used with the projects/properties custom post type.

How it looks now

Adding all the code (see below for the complete script) this is what my WordPress admin menu looks like:

Divi theme now with Properties instead of Projects
Divi theme now with Properties instead of Projects

That’s now working as I expect it. Job done.

Complete code

Here is the full code that I have in my child theme’s functions.php file:

<?php function child_et_pb_register_posttypes() { $labels = array( 'add_new' => __( 'Add New', 'Divi' ),
    'add_new_item' => __( 'Add New Property', 'Divi' ),
    'all_items' => __( 'All Properties', 'Divi' ),
    'edit_item' => __( 'Edit Property', 'Divi' ),
    'menu_name' => __( 'Properties', 'Divi' ),
    'name' => __( 'Properties', 'Divi' ),
    'new_item' => __( 'New Property', 'Divi' ),
    'not_found' => __( 'Nothing found', 'Divi' ),
    'not_found_in_trash' => __( 'Nothing found in Trash', 'Divi' ),
    'parent_item_colon' => '',
    'search_items' => __( 'Search Properties', 'Divi' ),
    'singular_name' => __( 'Property', 'Divi' ),
    'view_item' => __( 'View Property', 'Divi' ),
);

$args = array(
    'can_export' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'labels' => $labels,
    'menu_icon' => 'dashicons-admin-home',
    'menu_position' => 5,
    'public' => true,
    'publicly_queryable' => true,
    'query_var' => true,
    'show_in_nav_menus' => true,
    'show_ui' => true,
    'rewrite' => apply_filters( 'et_project_posttype_rewrite_args', array(
    'feeds' => true,
    'slug' => 'property',
    'with_front' => false,
)),
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'custom-fields' ),
);

register_post_type( 'project', apply_filters( 'et_project_posttype_args', $args ) );

$labels = array(
    'name' => _x( 'Categories', 'Property category name', 'Divi' ),
    'singular_name' => _x( 'Category', 'Property category singular name', 'Divi' ),
    'search_items' => __( 'Search Categories', 'Divi' ),
    'all_items' => __( 'All Categories', 'Divi' ),
    'parent_item' => __( 'Parent Category', 'Divi' ),
    'parent_item_colon' => __( 'Parent Category:', 'Divi' ),
    'edit_item' => __( 'Edit Category', 'Divi' ),
    'update_item' => __( 'Update Category', 'Divi' ),
    'add_new_item' => __( 'Add New Category', 'Divi' ),
    'new_item_name' => __( 'New Category Name', 'Divi' ),
    'menu_name' => __( 'Categories', 'Divi' ),
);

register_taxonomy( 'project_category', array( 'project' ), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_admin_column' => true,
    'query_var' => true,
) );

$labels = array(
    'name' => _x( 'Tags', 'Property Tag name', 'Divi' ),
    'singular_name' => _x( 'Tag', 'Property tag singular name', 'Divi' ),
    'search_items' => __( 'Search Tags', 'Divi' ),
    'all_items' => __( 'All Tags', 'Divi' ),
    'parent_item' => __( 'Parent Tag', 'Divi' ),
    'parent_item_colon' => __( 'Parent Tag:', 'Divi' ),
    'edit_item' => __( 'Edit Tag', 'Divi' ),
    'update_item' => __( 'Update Tag', 'Divi' ),
    'add_new_item' => __( 'Add New Tag', 'Divi' ),
    'new_item_name' => __( 'New Tag Name', 'Divi' ),
    'menu_name' => __( 'Tags', 'Divi' ),
);

register_taxonomy( 'project_tag', array( 'project' ), array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'show_admin_column' => true,
    'query_var' => true,
) );

$labels = array(
    'name' => _x( 'Layouts', 'Layout type general name', 'Divi' ),
    'singular_name' => _x( 'Layout', 'Layout type singular name', 'Divi' ),
    'add_new' => _x( 'Add New', 'Layout item', 'Divi' ),
    'add_new_item' => __( 'Add New Layout', 'Divi' ),
    'edit_item' => __( 'Edit Layout', 'Divi' ),
    'new_item' => __( 'New Layout', 'Divi' ),
    'all_items' => __( 'All Layouts', 'Divi' ),
    'view_item' => __( 'View Layout', 'Divi' ),
    'search_items' => __( 'Search Layouts', 'Divi' ),
    'not_found' => __( 'Nothing found', 'Divi' ),
    'not_found_in_trash' => __( 'Nothing found in Trash', 'Divi' ),
    'parent_item_colon' => '',
);

$args = array(
    'labels' => $labels,
    'public' => false,
    'can_export' => true,
    'query_var' => false,
    'has_archive' => false,
    'capability_type' => 'post',
    'hierarchical' => false,
    'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'custom-fields' ),
);

register_post_type( 'et_pb_layout', apply_filters( 'et_pb_layout_args', $args ) );
}

function remove_et_pb_actions() {
    remove_action( 'init', 'et_pb_register_posttypes', 15 );
}

add_action( 'init', 'remove_et_pb_actions');
add_action( 'init', 'child_et_pb_register_posttypes', 20 );
?>

 

Final thoughts

Like many things on my blog I’m primarily putting it here for my own reference, but if you find it useful — or would like to suggest improvements or additional features — please leave a comment below.

Clone this project on GitHub.

Update: Remember to reset your permalinks

Friday 20 March 2015

I meant to say this in the article above. Sometimes WordPress gets a bit muddled when you play around with custom post types.

The way to fix this is to go to Settings > Permalinks > Save Changes.

That’s enough to flush the permalinks and your custom post type should work. I had to do that a couple of times while figuring out how to do this.

Update 2: Plugin discovery

Monday 20 April 2015

A few days ago I discovered this plugin: Divi Page Building for Custom Content Types.

This plugin allows you to use the Divi builder for Posts, or indeed any custom post type.

Update 3: Fix for Divi 2.5

Saturday 26 September 2015

I’ve now (finally) updated the code to make it work fully in Divi 2.5.

In the end it was quite simple: the add_action(...) and remove_action(...) priorities were wrong in my code. These tell WordPress in which order actions should be executed.

In my previous code I was instructing WordPress to unload the default Divi project custom post type before it had even been defined.

The default priority value is 10; I’d set mine to 0 and 1, respectively.

A huge thank you to Craig Campbell for his excellent Chrome Logger extension and ChromePHP class — two tools that greatly helped me work out what was going on.

Review of Startup Framework for WordPress

Startup Framework

I first came across Startup Framework from Designmodo a few months ago and was immediately impressed.

Startup is a collection of responsive and customisable components that can be combined to meet most needs. In the full version there are around 100 components such as:

  • headers
  • footers
  • content blocks
  • contact forms
  • portfolio grids
  • maps
  • price tables
Startup Framework is a collection of customisable components
Startup Framework is a collection of customisable components

Both the design and code are clean and simple and the results look professional, without having to put in a great deal of effort. Startup has a similar concept to Blocks which is built on the Bootstrap CSS framework.

Startup Framework for WordPress

Last month I was invited to test drive Startup Framework for WordPress which combines the pre-designed components of Startup within a drag-and-drop interface within a WordPress theme.

I’ve only just managed to find the time to take it for a spin but what I’ve seen so far I’ve liked, even if the price seems a little steep: USD $149 per year for one website (inclusive of support and updates).

Theme

Startup Framework for WordPress installs as a theme. It seems to adds one new content type (SFW Pages) and the demo doesn’t give me access to the plugins so I can’t see whether the additional functionality is offered through plugins or built-into the theme itself.

What is added, however, is a new menu item: SFW Pages. This is where the majority of pages using this theme will be created. The default Pages option is still there but pages created using this appear to be simple and entirely centre-aligned, which seems odd.

A new menu item is added to the WordPress dashboard: SFW Pages.
A new menu item is added to the WordPress dashboard: SFW Pages.

Editing a page

When editing a SFW Page you see very little until you click the “Visual editor” button.

Unless you click the Visual editor button all you see is a button saying Visual editor
Unless you click the Visual editor button this is all you see.

That opens up a new drag-and-drop, WYSIWYG interface:

Welcome to the Startup Framework demo page
Welcome to the Startup Framework demo page

Along the top is a link back to the SFW Pages screen, the name of the current page, and three buttons on the right than enable you to reorder the blocks, preview the page or save the page.

On the left is a list of components (more about those in a moment).

But the most space is given to the content of your page. Here, almost everything is customisable. When you hover over a component block a settings cog appears at the top right giving you access to edit the HTML and CSS, reset the block to default settings, or delete the block completely.

Clicking on any text drops in a text-insertion point enabling you to edit the text. Double-clicking or highlighting text reveals a context menu offering three options: bold, italic or create a link.

It is all very intuitive so far.

Components

The bread and butter of this theme, however, is the collection of pre-designed components which is available at any time from a list on the left. (While you are editing existing components this shrinks to a ‘hamburger’ icon.)

On the demo that I’ve tried these components are collected into the following categories:

  • Headers
  • Contents
  • Price Tables
  • Projects
  • Contacts
  • Crew
  • Footers
  • My Blocks

Hovering over each category reveals a number of pre-designed options for that category, for example Headers:

Hovering over Headers reveals a number of pre-designed header options
Hovering over Headers reveals a number of pre-designed header options

These can then be dragged and dropped (or clicked) to be added to your page design, and  then edited as appropriate.

Some components are more editable than others, such as background images, image fading or colour tinting, social media buttons, etc.

Reordering the blocks is a simple case of clicking the “Reorder Blocks” button, then drag and drop in the new view:

Reorder Blocks shows a zoomed-out view of the whole page.
Reorder Blocks shows a zoomed-out view of the whole page.

Conclusion

I have only a couple of criticisms about

The first is that, personally, I would like to see a few more simple header components. For some pages, you don’t need a massive image or a lot of white space at the top. But I do recognise that this is a design decision.

My second, any main concern, however is the price. At USD $149 (approx GBP £93) per year for a single site that is more than twice what I currently pay for Divi.

That said, I do recognise that a lot of work has gone into this framework and theme, and that it’s aimed primarily at business rather than for personal blogs.

Overall, I’ve been really impressed with Startup Framework for WordPress. If you need to create a beautiful, modern-looking and responsive website very quickly then you would be hard pressed to find anything to get the job quite as quickly as Startup, even if you used Divi from Elegant Themes which is my current favourite.

The sunk cost fallacy in action

Man sitting on a pound sign submerged in water, surrounded by sharks.
Source: iStock

Earlier this year I started to plan a major redesign for my website garethjmsaunders.co.uk — most of it hasn’t had a redesign since about 2003; it’s still built around a table layout!

In the process of redesigning the site I learned a really important lesson that in the long run has saved me hours and hours of development. It’s to do with the sunk cost fallacy.

A bridge too far

I’ve completed plenty of site designs in both my personal and professional lives. This was going to be no different. I did some initial research, sketched out the layout and features that I’d like and then looked around for a suitable premium WordPress theme that I could use. I settled on Bridge by Qode, which cost me US $58 (approx. GBP £35).

Bridge seemed to offer the features and flexibility that I was looking for in a theme. But once I had downloaded and installed it on a test site on my local development server I discovered just how complex it was.

At the time it offered around 10 demonstration sites to help you get to grips with all the possible permutations. It now boasts 42 ready-to-use demos.

I spent a good two to three weeks just installing demo sites and trying to reconcile what I was learning hands-on with the documentation. And at the end of that period, to be honest, I really didn’t feel that I was anywhere closer to understanding how I might use the theme. Bridge is a hugely capable theme, however, it simply offered too much for my requirements.

But I felt that I had to persevere, I had spent both time and money on it, after all. Surely it had to get easier if I installed another demo site, and read the documentation just one more time, and… presumably spent another 2–3 weeks trying to understand the minutiae of this theme.

Sunk cost fallacy

It was at that point I realised that I was falling into the ‘sunk cost fallacy’.

In economics, a sunk cost is any cost that has already been paid and cannot now be recovered. So in this example, I had already bought the Bridge theme. I had spent £35 and wouldn’t be able to get a refund.

The fallacy that I was falling into was that I was making decisions about the future of my site based on past expenses. Or as You Are Not So Smart puts it

[y]our decisions are tainted by the emotional investments you accumulate, and the more you invest in something the harder it becomes to abandon it.

I felt that because I had spent money on something, even though I was finding it too complex and not entirely suitable for the purpose I’d bought it — despite all that — I still felt that I ought to persevere and try to make it fit my needs.

What a divvy!

Divi

Freed by my decision to simply let go of using Bridge for this project, I went shopping again.

When I’d been looking around for themes to start with, I had narrowed it down to two: Bridge and Divi by Elegant Themes. So I bought Divi (USD $89 per year / approx. GBP £55).

In the long run that mistake has cost me money, but the time that it has saved me is immeasurable (or rather, I haven’t actually measured it).

The theme does exactly what I need and in a fraction of the time. I find the theme’s interface really intuitive, and the restrictions it puts on me (by not trying to do everything in every possible way) challenges me to be more creative with what I’ve got. Too much choice is a bad thing, remember.

Conclusion

The sunk cost paradox is certainly something to bear in mind the next time you need to make a decision: don’t necessary let past costs (time or money) influence your decisions about the future.

Lifehack has an interesting article about how the sunk cost fallacy makes you act stupid.