This is a collection of code that I often turn to when working with WordPress
Every time that I feel comfortable with my level of knowledge associated with WordPress, there is a problem that leads me to discover a particular attribute that I don’t know how I lived without. This time it is the code seemingly obfuscated beyond the WYSIWIG editor and the dashboard.
For some this code is about command line, while others it is about the bashing out the building blocks. My interest here is the everyday code, the little snippets that find there way in here or there while I work with WordPress, many of which have come from wandering through Chris Aldrich’s commonplace blog:
Webmentions
Webmentions are the building block for conversations across the web. However, with WordPress, they often get caught in moderation and/or flagged as spam by Akismet and other spam filter plugins. To prevent this, you can add this PHP snippet to your theme’s functions.php file:
function unspam_webmentions($approved, $commentdata) { return $commentdata['comment_type'] == 'webmention' ? 1 : $approved; } add_filter('pre_comment_approved', 'unspam_webmentions', '99', 2);
Alan Levine has documented the process of creating a child theme, which is useful when customising the code, while Gregor Morrill has developed code to approve webmentions from domains previously approved.
Microformats
Microformats is a data format built upon adopted standards and prior developments. There are a number of specifications, which can be manually added within the existing HTML. It provides the foundation for software to automatically process information. People like David Shanske and Matthias Pfefferle have developed plugins and themes to mark-up content in the backend. You can also use this site to check the microformats on your site, while for a more extensive introduction, listen to Tantek Çelik on the future of web apps.
Two microformats I have worked with are comments and rel=me.
Comment
Although the appropriate microformats are usually built into the Webmentions plugin. The plugin for theaded comments can be a bit more tempremental. Chris Aldrich recommends manually adding the reply class and URL just to make sure:
<a class="u-in-reply-to" href="http://www.example.com"></a>
I have come to do this out of habit for replies now.
Rel-me
Another microformat incorperated into many Indieweb sites is Rel-me. It is used to consolidate identity, as well as domain sign in.
<ul> <li><a href="https://twitter.com/aaronpk" rel="me">@aaronpk on Twitter</a></li> <li><a href="https://github.com/aaronpk" rel="me">Github</a></li> <li><a href="https://google.com/+aaronpk" rel="me">Google</a></li> <li><a href="mailto:me@example.com" rel="me">me@example.com</a></li></ul>
Chris Aldrich has taken rel-me to its extremes by creating a page in which he records all his accounts. I have also started my own. For more on rel-me, watch Ryan Barrett’s keynote at IndieWeb Summit 2017.
Page Bookmarks
I remember coming across in plugin in Edublogs that allowed you to add a table of contents. This reminded me of the functionality in Google Docs and one of the things I noticed in both was the presence of a hashtag at the end of the URL. (Interestingly, now every heading in Google Docs has a unique identifier automatically created.) In Docs, this is something that can be added using the Bookmark feature, I wondered if the same could be done in WordPress. I discovered that within the tags, you insert ‘name=”unique-name”‘:
<a name="unique-name">Target Text</a>
This can then be used to guide readers to a specific point in your text.
Custom URLs for Post Kinds
Using the Post Kinds plugin provides a list a unique urls associated with the kinds of posts on the site. Chris Aldrich provides some guides in how to use these to create custom urls to generate a specific post screen. This can then be used to create a bookmarklet:
http://example.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url
Dariusz Kuśnierek provides some other examples of custom URLs, which help in U deratamding the way urls work in general.
RSS Feeds
RSS provides a means of following a site without checking in all of the time. To access a feed to follow in WordPress, you simply add ‘/feed/’ to the end:
http://www.example.com/feed
As some feeds can contain a range of content, it is possible to hone down to particular categories by adding ‘?cat=[category id]’ to the end.
http://www.example.com/feed?cat=[category id]
This can be useful if you only want to follow a specific subject or area.
Taking this a step further, you can also produce an RSS based on Post Kinds. Although not all blogs use these, for those that do it can be a useful demarcation. Similar to categories, you add ‘?kind=type’ to the end of the feed.
http://www.example.com/feed/?kind=bookmark
For more on RSS feeds, see this post from Chris Aldrich.
OPML
Where as RSS is used for a single feed, OPML allows a user to aggregate. I have written about them before. It is possible to store an OPML in WordPress. To access this you add the append ‘/wp-links-opml.php’ to the end.
http://www.example.com/wp-links-opml.php
In addition to this, Chris Aldrich has documented how to split a file into categories:
?link_cat=[category id]
I have yet to categorise my links, however Aldrich provides an extensive example.
So what about you? What little bits of code do you use? As always, comments welcome.
If you enjoy what you read here, feel free to sign up for my monthly newsletter to catch up on all things learning, edtech and storytelling.
Hidden in the Code by Aaron Davis is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Mark Luetke who worked with me at VCU briefly built this reference to all the wp_query options and I find myself returning to it again and again. I’ve started collecting useful WordPress snippets that I tend to reuse that’s similar in theme to this. I’ve got another for Gravity Forms and for Google Scripts. Your format ends up being much more user friendly so I’ve got to rethink some things.
Thank you for this valuable resource! I have got to get back on the blogging wagon and this has inspired me!
Fragmentions
Ages ago I added support on my website for fragmentions.
Wait… What is that?
Fragmention is a portmanteau word made up of fragment and mention (or even Webmention), but in more technical terms, it’s a simple way of creating a URL that not only targets a particular page on the internet, but allows you to target a specific sub-section of that page whether it’s a photo, paragraph, a few words, or even specific HTML elements like
<div>or<span>on such a page. In short, it’s like a permalink to content within a web page instead of just the page itself.A Fragmention Example
Back in December Aaron Davis had made a quote card for one of his posts that included a quote from one of my posts. While I don’t think he pinged (or webmentioned) it within his own post, I ran across it in his Twitter feed and he cross-posted it to his Flickr account where he credited where the underlying photo and quote came from along with their relevant URLs.
Fragmentions could have not only let him link to the source page of the quote, it would have let him directly target the section or the paragraph where the quote originated or–even more directly–the actual line of the quote.
Here’s the fragmention URL that would have allowed him to do that: http://boffosocko.com/2017/10/27/reply-to-laying-the-standards-for-a-blogging-renaissance-by-aaron-davis/#I%E2%80%99m%20not%20looking
Go ahead and click on it (or the photo) to see the fragmention in action.
What’s happening?
Let’s compare the two URLs:
1. http://boffosocko.com/2017/10/27/reply-to-laying-the-standards-for-a-blogging-renaissance-by-aaron-davis/
2. http://boffosocko.com/2017/10/27/reply-to-laying-the-standards-for-a-blogging-renaissance-by-aaron-davis/#I%E2%80%99m%20not%20looking
They both obviously point to the same specific page, and their beginnings are identical. The second one has a # followed by the words “I’m not looking” with some code for blank spaces and an apostrophe. Clicking on the fragmention URL will take you to the root page which then triggers a snippet of JavaScript on my site that causes the closest container with the text following the hash to be highlighted in a bright yellow color. The browser also automatically scrolls down to the location of the highlight.
Note: rather than the numbers and percent symbols, one could also frequently use the “+” to stand in for white spaces like so: http://boffosocko.com/2017/10/27/reply-to-laying-the-standards-for-a-blogging-renaissance-by-aaron-davis/#not+looking+for+just This makes the URL a bit more human readable. You’ll also notice I took out the code for the apostrophe by omitting the word “I’m” and adding another word or two, but I still get the same highlight result.
This can be a very useful thing, particularly on pages with huge amounts of text. I use it quite often in my own posts to direct people to particular sub-parts of my website to better highlight the pieces I think they’ll find useful.
It can be even more useful for academics and researchers who want to highlight or even bookmark specific passages of text online. Those with experience on the Medium.com platform will also notice how useful highlighting can be, but having a specific permalink structure for it goes a step further.
I will note however, that it’s been rare, if ever, that anyone besides myself has used this functionality on my site. Why? We’ll look at that in just a moment.
Extending fragmentions for easier usability.
Recently as a result of multiple conversations with Aaron Davis (on and between our websites via webmention with syndication to Twitter), I’ve been thinking more about notes, highlights, and annotations on the web. He wrote a post which discusses “Page Bookmarks” which are an interesting way of manually adding anchors on web pages to allow for targeting specific portions of web pages. This can make it easy for the user to click on links on a page to let them scroll up and down specific pages. Sadly, these are very painful to create and use both for a site owner and even more so for the outside public which has absolutely no control over them whatsoever.
His post reminded me immediately of fragmentions. It also reminded me that there was a second bit of user interface related to fragmentions that I’d always meant to also add to my site, but somehow never got around to connecting: a “fragmentioner” to make it more obvious that you could use fragmentions on my site.
In short, how could a user know that my website even supports fragmentions? How could I make it easier for them to create a fragmention from my site to share out with others? Fortunately for me, our IndieWeb friend Kartik Prabhu had already wired up the details for his own personal website and released the code and some pointers for others who were interested in setting it up themselves. It’s freely available on Github and includes some reasonable details for installation.
So with a small bit of tweaking and one or two refinements, I got the code up and running and voilà! I now have a natural UI for highlighting things.
How?
When a user naturally selects a portion of my page with their mouse–the way they might if they were going to cut and paste the text, a simple interface pops up with instructions to click it for a link. Kartik’s JavaScript automatically converts the highlight into the proper format and changes the page’s URL to include the appropriate fragmention URL for that snippet of the page. A cut and paste allows the reader to put that highlighted piece’s URL anywhere she likes. It
Highlighting text pulls up some simple user interface for creating a fragmention to the highlighted text.
The future
What else would be nice?
I can’t help but think that it would be fantastic if the WordPress Fragmention plugin added the UI piece for highlight and sharing text via an automatically generated link.
Perhaps in the future one could allow a highlight and click interaction not only get the link, but to get a copy of both the highlighted text and the link to the URL. I’ve seen this behavior on some very socially savvy news websites. This would certainly make a common practice of cutting and pasting content much easier to do while also cleverly including a reference link.
The tough part of this functionality is that it’s only available on websites that specifically enable it. While not too difficult, it would be far nicer to have native browser support for both fragmention creation and use. This would mean that I don’t need to include the JavaScript on my website to do the scrolling or highlighting and I wouldn’t need any JavaScript on my site to enable the highlighting to provide the specific code for the custom URL. How nice would it be if this were an open web standard and supported by major browsers without the need for work at the website level?
Medium-like highlighting and comments suddenly become a little easier for websites to support. With some additional code, it’s only a hop, skip, and a jump to dovetail this fragmention functionality with the W3C Webmentions spec to allow inline marginalia on posts. One can create a fragmention targeting text on a website and write a reply to it. With some UI built out, by sending a webmention to the site, it could pick up the comment and display it as a marginal note at that particular spot instead of as a traditional comment below the post where it might otherwise loose the context of being associated at the related point in the main text. In fact our friend Kartik Prabhu has done just this on his website. Here’s an example of it in his post announcing the feature.
Example of inline marginalia on Kartik Prabhu’s website “Parallel Transport”.
You’ll notice that small quotation bubbles appear at various points in the text indicating marginalia. By clicking on them, the bubble turns green and the page expands to show the comment at that location. One could easily imagine CSS that allows the marginalia to actually display in the margin of the page for wider screens.
How could you imagine using fragmentions? What would you do with them? Feel free to add your thoughts below or own your site and send me a webmention.
Respond via Twitter:
Reply
Repost
Like
Syndicated copies to:
Author: Chris Aldrich
I’m a biomedical and electrical engineer with interests in information theory, complexity, evolution, genetics, signal processing, theoretical mathematics, and big history.
I’m also a talent manager-producer-publisher in the entertainment industry with expertise in representation, distribution, finance, production, content delivery, and new media.
View all posts by Chris Aldrich
Also on:
Bookmarked Hidden in the Code by Aaron (Read Write Respond)
This is a collection of code that I often turn to when working with WordPress
Every time that I feel comfortable with my level of knowledge associated with WordPress, there is a problem that leads me to discover a particular attribute that I don’t know how I lived without. This time it is the code…
Not sure how I missed this. Some useful stuff for indieweb in WordPress. More links and rabbit holes in the comments too. Bookmarked for the summer holidays.
Comment
Although the appropriate microformats are usually built into the Webmentions plugin. The plugin for theaded comments can be a bit more tempremental. Chris Aldrich recommends manually adding the reply class and URL just to make sure:
I have come to do this out of habit for replies now.
Among other interesting snippets.
Like this: Like Loading…
Chris Aldrich shares a number of codes, including properties supported by microsub servers:
And the ability to save a Tweet to Internet Archive:
Chris, I have an OPML file, but still need to sort out how I display my blogroll.
Thank you Wouter for the read. I accept your criticism of my practice. To explain my personal intent, I used to use Diigo to capture such links. However, I turned to using my own sites as I wanted to own the data. I am not worried about whether it is ‘blogging’ or a ‘weblog’, my focus is on collecting the dots to develop longer form reflections upon. I felt awkward when I clicked on Dave Cormier’s site and found it was full of my pingbacks. My site therefore acts as something of a canonical link in-lieu of the actual link.
In regards to following the firehose, I have discussed was of adjusting the feed before. However, I am yet to set up a page like Chris Aldrich. From your points, I guess I should.
I did think that maybe my monthly newsletter sufficed, obvious not.
As a side note to all this, I also wondered about what it might mean to capture absolutely everything to form a deeper appreciate my presence on the web, but I long gave up that hope. I read way more than I respond to.