Route Pages going somewhere 04
September 23, 2014
I've moved on with Route Pages plugin UI cleaning and modification and injected a custom title in the advanced edit screen.
The problem
In my previous post I've laid the base for UI filtering when it comes to route-generated pages and posts and removing more meta boxes, namely the "Slug" and "Author" ones, has been a question of hooking one more method
public function hook()
{
$this->f->add_filter('posts_selection', array($this, 'filterPostSupports'));
$this->f->add_action('posts_selection', array($this, 'filterMetaBoxes'));
}
setting up one more RoutePages_Options
method
public function getMetaboxesBlacklistFor($post)
{
$defaults = array('slugdiv', 'authordiv', 'submitdiv');
$metaBoxes = apply_filters(RoutePages::FILTER_POST_METABOXES_BLACKLIST, $defaults, $post);
if (!is_array($metaBoxes)) {
$metaBoxes = $defaults;
}
return $metaBoxes;
}
and finally using the option in the method attached to the hook
public function filterMetaBoxes() {
global $post;
if (!$post || !is_admin()) {
return;
}
if (!$this->pageManager->isAGeneratedPost($post)) {
return;
}
// wwid
$metaBoxes = $this->options->getMetaboxesBlacklistFor($post);
foreach ($metaBoxes as $metaBox) {
$this->f->remove_meta_box($metaBox, $post->post_type, 'normal');
}
}
The result better suits my goal but still shows the title input [](http://theaveragedev.local/wordpress/wp-content/uploads/2014/09/2014-09-22-at-20.22.png)
Removing the title
Since I do not want the administrator to think a route-generated title could be modified I've removed the title support for route-generated pages in the RoutePages_Options::getSupportsBlacklistFor
method defaults to end up with an headless edit screen
public function getSupportsBlacklistFor($post)
{
// added 'title' here
$defaults = array('title', 'editor', 'revisions', 'page-attributes', 'post-formats', 'comments');
$supports = apply_filters(RoutePages::FILTER_POST_SUPPORTS_BLACKLIST, $defaults, $post);
if (!is_array($supports)) {
$supports = $defaults;
}
return $supports;
}
[](http://theaveragedev.local/wordpress/wp-content/uploads/2014/09/2014-09-22-at-20.37.png) How, then, to insert my title field in the page layout? I could have used the
add_meta_box
function but wanted to give the route title a more relevant position.
UI Inception
I've ended up with a screen like this [](http://theaveragedev.local/wordpress/wp-content/uploads/2014/09/2014-09-23-at-07.40.png) which is very clean and only shows relevant controls and information to the administrator. The title and slug I've injected in the markup buffering and modifying the output using the PHP Simple HTML DOM Parser class.
I began buffering the output in the edit_form_top
hook and output its modified version in the edit_form_after_title
hook
public function hook()
{
...
$this->f->add_action('edit_form_top', array($this, 'maybeOBStart'));
$this->f->add_action('edit_form_after_title', array($this, 'maybeOutputRouteTitle'));
}
public function maybeOBStart()
{
global $post;
if (!$this->pageManager->isAGeneratedPost($post)) {
return;
}
ob_start();
}
public function maybeOutputRouteTitle()
{
global $post;
if (!$this->pageManager->isAGeneratedPost($post)) {
return;
}
$buffer = ob_get_clean();
$html = new simple_html_dom($buffer);
$node = "<h2>$post->post_title</h2>";
$slug = site_url('/' . $post->post_name);
$node .= "<p><b>$slug</b></p>";
$description = $this->pageManager->getDescription($post);
if ($description) {
$node .= "<p>$description</p>";
}
$html->find('#post-body-content', 0)->innertext = $node;
$output = $html->save();
echo $output;
}
But that was a rough working draft and not option-enabled and I've tried to make it better. It makes sense tho show the user a route description below the title, e.g. "an archive of the most recent 10 posts" for the /posts
route, and to do so I will simply use the with
method the WPRouting_PersistableRoute
class offers like
RoutePages_GeneratingRoute::get('one', function(
echo "Welcome to page one.";
))->shouldGenerate('page')
->withTitle('One')
->with('description', 'The page one');
and that's the result [](http://theaveragedev.local/wordpress/wp-content/uploads/2014/09/2014-09-23-at-08.09.png)
Options
I want developers to be able to hook in and change the appended markup and after some modifications and the addition of a simple templating class I've modified the maybeOutputRouteTitle
code to
public function maybeOutputRouteTitle()
{
global $post;
if (!$post || !is_admin()) {
return;
}
if (!$this->pageManager->isAGeneratedPost($post)) {
return;
}
// buffer open from the maybeBufferOutput method
$buffer = ob_get_clean();
$html = new simple_html_dom($buffer);
// fabricate the title node html
$vars = array(
'title' => $post->post_title,
'slug' => site_url('/' . $post->post_name),
'description' => $this->pageManager->getDescription($post)
);
$title = $this->templateEngine->getTemplate($this->templatePath('routeTitle'), $vars);
// filter the html markup
$title = $this->f->apply_filters(self::FILTER_TITLE_HTML, $title, $post);
// inject the title html
$html->find('#post-body-content', 0)->innertext = $title;
$output = $html->save();
echo $output;
}
The end result is a clean-looking interface for both pages [](http://theaveragedev.local/wordpress/wp-content/uploads/2014/09/2014-09-23-at-10.10.png) and posts [
](http://theaveragedev.local/wordpress/wp-content/uploads/2014/09/2014-09-23-at-10.10-2.png) generated by the routes.
Next
I will filter the "Quick edit" view to remove/replace controls the same way I did with the advanced edit screen UI.