Checkin Cross Campus Old Pasadena

Cross Campus Old Pasadena
We're definitely talking about WordPress, But we'll be discussing developer-specific topics. If you would like to attend, we strongly encourage you to enrich the discussion by briefly sharing on a topic of your choice surrounding WordPress development. Discussion on your topic should last anywhere from 5-10 minutes, and can include sharing your screen although sharing your screen is not a requirement.

Attending the Advanced WordPress Meetup (Advanced Topics April 2017 Edition)

Pasadena, California, United States of America

Syndicated copies to:

📖 Read pages 57-103 of Professional WordPress: Design and Development 3rd Edition by Brad Williams, David Damstra, and Hal Stern

📖 Read pages 57-103 of Professional WordPress: Design and Development 3rd Edition by Brad Williams, David Damstra, and Hal Stern

The review of core had some resources I’m sure I knew about and have even used before, but somehow forgotten from long disuse. The quick review of the loop was useful to have again particularly as I delve into some themeing work these past few weeks.

The examples they provide are pretty solid from a pedagogic standpoint.

Professional WordPress: Design and Development 3rd Edition by Brad Williams, David Damstra, and Hal Stern
Syndicated copies to:

@Mentions from Twitter to My Website

An outline of how I used Indieweb technology to let Twitter users send @mentions to me on my own website.

You can tweet to my website.

One of my favorite things about the indieweb is how much less time I spend on silo sites like Facebook and Twitter. In particular, one of my favorite things is not only having the ability to receive comments from many of these sites back on the original post on my own site, but to have the ability for people to @mention me from Twitter to my own site.

Yes, you heard that right: if you @mention me in a tweet, I’ll receive it on my own website. And my site will also send me the notification, so I can turn off all the silly and distracting notifications Twitter had been sending me.

Below, I’ll detail how I set it up using WordPress, though the details below can certainly be done using other CMSes and platforms.

rel=”me”

The rel=”me” is put on the link that wraps this Twitter icon in my h-card on my homepage.

On my homepage, using a text widget, I’ve got an h-card with my photo, some basic information about me, and links to various other sites that relate to me and what I’m doing online.

One of these is a link to my Twitter account (see screenshot). On that link I’m using the XFN’s rel=”me” on the link to indicate that this particular link is a profile equivalence of my identity on the web. It essentially says, “this Twitter account is mine and also represents me on the web.”

Here’s a simplified version of what my code looks like:

<a href="https://twitter.com/chrisaldrich" rel="me">@chrisaldrich</a>

If you prefer to have an invisible link on your site that does the same thing you could alternately use:

<link href="https://twitter.com/twitterhandle" rel="me">

Similarly Twitter also supports rel=”me”, so all I need to do there is to edit my profile and enter my website www.boffosocko.com into the “website” field and save it. Now my Twitter profile page indicates, this website belongs to this Twitter account. If you look at the source of the page when it’s done, you’ll see the following:

<a class="u-textUserColor" title="http://www.boffosocko.com" href="https://t.co/AbnYvNUOcy" target="_blank" rel="me nofollow noopener">boffosocko.com</a>

Though it’s a bit more complicated than what’s on my site, it’s the rel=”me” that’s the important part for our purposes.

Now there are links on both sites that indicate reciprocally that each is related to the other as versions of me on the internet. The only way they could point at each other this way is because I have some degree of ownership of both pages. I own my own website outright, and I have access to my profile page on Twitter because I have an account there. (Incidentally, Kevin Marks has built a tool for distributed identity verification based on the reciprocal rel=”me” concept.)

Webmention Plugin

Next I downloaded and installed the Webmention plugin for WordPress. From the plugin interface, I just did a quick search, clicked install, then clicked “activate.” It’s really that easy.

It’s easy, but what does it do?

Webmention is an open internet protocol (recommended by the W3C) that allows any website to send and receive the equivalent of @mentions on the internet. Unlike sites like Twitter, Facebook, Medium, Google+, Instagram, etc. these mentions aren’t stuck within their own ecosystems, but actually work across website borders anywhere on the web that supports them.

I use the domain name BoffoSocko as my online identity.

The other small difference with webmention is instead of using one’s username (like @chrisaldrich in my case on Twitter) as a trigger, the trigger becomes the permalink URL you’re mentioning. In my case you can webmention either my domain name http://www.boffosocko.com or any other URL on my site. If you really wanted to, you could target even some of the smallest pieces of content on my website–including individual paragraphs, sentences, or even small sentence fragments–using fragmentions, but that’s something for another time.

Don’t use WordPress?

See if there’s webmention support for your CMS, or ask your CMS provider or community, system administrator, or favorite web developer to add it to your site based on the specification. While it’s nice to support both outgoing and incoming webmentions, for the use we’re outlining here, we only need to support incoming webmentions.

Connect Brid.gy

Sadly, I’ll report that Twitter does not support webmentions (yet?!) otherwise we could probably stop here and everything would work like magic. But they do have an open API right? “But wait a second now…” you say, “I don’t know code. I’m not a developer.”

Worry not, some brilliant engineers have created a bootstrap called Brid.gy that (among many other useful and brilliant things) forces silos like Twitter, Facebook, Google+, Instagram, and Flickr to send webmentions for you until they decide to support them natively. Better, it’s a free service, though you could donate to the ASPCA or EFF in their name to pay it forward.

So swing your way over to http://brid.gy and under “Get started” click on the Twitter logo. Use OAuth to log into Twitter and authorize the app. You’ll be redirected back to Brid.gy which will then ensure that your website and Twitter each have appropriate and requisite rel=”me”s on your links. You can then enable Brid.gy to “listen for responses.”

Now whenever anyone @mentions you (public tweets only) on Twitter, Brid.gy will be watching your account and will automatically format and send a webmention to your website on Twitter’s behalf.

On WordPress your site can send you simple email notifications by changing your settings in the Settings >> Discussion dashboard, typically at http://www.exampl.com/wp-admin/options-discussion.php. One can certainly use other plugins to arrange for different types of notifications as well.

Exotic Webmentions

A bonus step for those who want more control!

In the grand scheme of things webmentions are typically targeted at specific pages or posts on your site. General @mentions on Twitter not related to specific content on your site will usually be sent to your homepage. Over time, this may begin to get a bit overwhelming and may take your page longer to load as a result. An example of this is Kevin Marks’ site which has hundreds and hundreds of webmentions on it. What to do if this isn’t your preference?

In my case, I thought it would be wise to collect all these unspecific or general mentions on a special page on my site. I decided to call it “Mentions” and created a page at http://boffosocko.com/mentions/.

Then I inserted a small piece of custom code in the functions.php file of my site’s (child) theme like the following:

// For allowing exotic webmentions on homepages and archive pages

function handle_exotic_webmentions($id, $target) {
// If $id is homepage, reset to mentions page
if ($id == 55669927) {
return 55672667;
}

// do nothing if id is set
if ($id) {
return $id;
}

// return "default" id if plugin can't find a post/page
return 55672667;
}

add_filter("webmention_post_id", "handle_exotic_webmentions", 10, 2);

This simple filter for the WordPress Webmention plugin essentially looks at incoming webmentions and if they’re for a specific page/post, they get sent to that page/post. If they’re sent to either my homepage or aren’t directed to a particular page, then they get redirected to my /mentions/ page.

In my case above, my homepage has an id of 55669927 and my mentions page has an id of 55672667, you should change your numbers to the appropriate ids on your own site when using the code above. (Hint: these id numbers can usually be quickly found by hovering over the “edit” links typically found on such pages and posts and relying on the browser to show where they resolve.)

Tip of the Iceberg

Naturally this is only the tip of the indieweb iceberg. The indieweb movement is MUCH more than just this tiny, but useful, piece of functionality. There’s so much more you can do with not only Webmentions and even Brid.gy functionality. If you’ve come this far and are interested in more of how you can better own your online identity, connect to others, and own your data. Visit the Indieweb.org wiki homepage or try out their getting started page.

If you’re on WordPress, there’s some additional step-by-step instructions: Getting Started on WordPress.

Syndicated copies to:

Our comment quiz module is now Open Source | NRKbeta

Our comment quiz module is now Open Source by Henrik Lied (NRKbeta)
Our quiz module is now open source on GitHub. After launching our comment quiz module, we’ve received a lot of questions about whether it’s available for download. Now it is.

Continue reading “Our comment quiz module is now Open Source | NRKbeta”

Syndicated copies to:

Read posts nearly perfected!

Hoorah, hooray!

In a project which I started just before IndieWebCamp LA in November, I’ve moved a big step closer to perfecting my “Read” posts!

Thanks in large part to WordPressPressForward, friends and help on the IndieWeb site too numerous to count, and a little bit of elbow grease, I can now receive and read RSS feeds in my own website UI (farewell Feedly), bookmark posts I want to read later (so long Pocket, Instagram, Delicious and Pinboard), mark them as read when done, archive them on my site (and hopefully on the Internet Archive as well) for future reference, highlight and annotate them (I still love you hypothes.is, but…), and even syndicate (POSSE) them automatically (with emoji) to silos like Facebook, Twitter (with Twitter Cards), Tumblr, Flipboard, LinkedIn, Pinterest, StumbleUpon, Reddit, and Delicious among others.

Syndicated copies in the silos when clicked will ping my site for a second and then automatically redirect to the canonical URL for the original content to give the credit to the originating author/site. And best of all, I can still receive comments, likes, and other responses from the siloed copies via webmention to stay in the loop on the conversations they generate without leaving my site.

Here’s an example of a syndicated post to Twitter:

I’m now more resistant to a larger number of social media silos disappearing with my data. Huzzah!

What’s next?

 

Syndicated copies to:

🔖 Post filtering fixes at Homebrew Website Club | Colin Devroe

Post filtering fixes at Homebrew Website Club by Colin Devroe (cdevroe.com)
Last night Tucker Hottes, Den Temple and I held the first Homebrew Website Club at The Keys in Scranton, PA. I really appreciate that HWC will force me to set aside some time to work on my personal site since it is often neglected for more pressing projects.

Nota bene: Colin is dogfooding his IndieWeb friendly WordPress theme on Github! It’s a beautiful, simple, and very clean theme for a personal website/blog.

Colin, do you mind if we provide a link to your theme on https://indieweb.org/WordPress/Themes for others to potentially use and/or improve upon? (See also discussion at https://indieweb.org/WordPress/Development#Themes.)

Syndicated copies to:

Sage vs Underscores

Sage vs Underscores | WordPress Starter Themes (Roots)
Sage makes you a better developer. Modern build tooling, live reloading, modern PHP & requirements, DRY templates with template inheritance and more.

Modern front-end workflow

If Underscores is a “1,000 hour head start”, Sage is a 10,000 hour head start.

Write stylesheets with Sass, automatically check your JavaScript for errors, optimize images, enable synchronized browser testing, and more with our gulp setup.

Syndicated copies to:

My reply to Micro.blog Project Surges Past $65K on Kickstarter, Gains Backing from DreamHost | WordPress Tavern

Micro.blog Project Surges Past $65K on Kickstarter, Gains Backing from DreamHost by Sarah Gooding (WordPress Tavern)
With one week remaining on its Kickstarter campaign, the Micro.blog indie microblogging project has surged past its original $10K funding goal with $66,710 pledged by 2,381 backers. This puts proje…

I love that Micro.blog is doing so well on Kickstarter! I’m even more impressed that DreamHost is backing this and doubling down in this area.

I coincidentally happened to have a great conversation yesterday with Jonathan LaCour before I saw the article and we spoke about what DreamHost is doing in the realm of IndieWeb and WordPress. I love their approach and can’t wait to see what comes out of their work and infectious enthusiasm.

I’m really surprised that WordPress hasn’t more aggressively taken up technologies like Webmention, which is now a W3C recommendation, or micropub and put them directly into core. For the un-initiated, Webmention works much like @mention on Twitter, Medium, Facebook, and others, but is platform independent, which means you can use it to ping any website on the internet that supports it. Imagine if you could reply to someone on Twitter from your WordPress site? Or if you could use Facebook to reply to a post on Medium? (And I mean directly and immediately in the type @mention/hit publish sense, not doing any laborious cut and paste from one platform to another nonsense that one is forced to do now because all the social silos/walled gardens don’t inter-operate nicely, if at all.) Webmention can make all that a reality.  Micropub is a platform independent spec that allows one to write standalone web or mobile apps to create publishing interfaces to publish almost any type of content to any platform–think about the hundreds of apps that could publish to Twitter in its early days, now imagine expanding that to being able to use those to publish to any platform anywhere?

While Twitter has been floundering for a while, WordPress has the structure, ecosystem, and a huge community to completely eat Twitter’s (and even Facebook/ Instagram’s, Medium’s, & etc.) lunch not only in the microblog space, but the larger space which includes blogging, photos, music, video, audio, and social media in general. The one piece they’re missing is a best-in-class integrated feed reader, which, to be honest, is the centerpiece of both Twitter and Facebook’s services. They seem to be 98% readers and 2% dead-simple posting interface while WordPress is 98% posting interface (both more sophisticated/flexible and more complicated), and nearly non-existent (and unbundled) reader.

WordPress has already got one of the best and most ubiquitous publishing platforms out there (25+% of the web at last count). Slimming down their interface a tad to make it dead simple for my mom to post, or delegating this to UX/UI developers with micropub the way that Twitter allowed in the early days with their open API and the proliferation of apps and interfaces to post to twitter, in addition to Webmentions could create a sea-change in the social space. Quill is a good, yet simple example of an alternate posting interface which I use for posting to WordPress. Another is actually Instagram itself, which I use in conjunction with OwnYourGram which has micropub baked in for posting photos to my site with Instagram’s best-in-class mobile interface. Imagine just a handful of simple mobile apps that could be customized for dead-simple, straightforward publishing to one’s WordPress site for specific post types or content types…

With extant WordPress plugins, a lot of this is already here, it’s just not evenly distributed yet, to borrow the sentiment from William Gibson.

For just a few dollars a year, everyday people could more easily truly own all their content and have greater control over their data and their privacy.

I will note that it has been interesting and exciting seeing the Drupal community stepping on the gas on the Webmention spec (in two different plugins) since the W3C gave it recommendation status earlier this month. This portends great things for the independent web.

I haven’t been this excited about what the web can bring to the world in a long, long time.

Syndicated copies to:

10 Fantastic Free WordPress Plugins for 2017 (That You May Not Have Heard Of) | @thetorquemag

10 Fantastic Free WordPress Plugins for 2017 (That You May Not Have Heard Of) by John Hughes (Torque)
There are so many plugins out there it can be hard to find really good ones. These ten free WordPress plugins add interesting capabilities.

When it comes to WordPress plugins, some big names get all the glory (we’re looking at you, Yoast SEO), while others languish in semi-obscurity. Considering there are thousands of plugins available for the platform, you could be missing out on some amazing tools by limiting yourself to the most popular options. Continue reading “10 Fantastic Free WordPress Plugins for 2017 (That You May Not Have Heard Of) | @thetorquemag”

A WordPress plugin for posting to IndieNews

WordPress IndieNews by Matthias Pfefferle (github.com)
Automatically send webmentions to IndieNews

I just noticed that Matthias Pfefferle has kindly created a little WordPress plugin for posting to IndieNews.

Syndicated copies to:

Jetpack 4.5: Monetize your site, brand new VideoPress, and many new shortcodes and widgets | Jetpack for WordPress

Jetpack 4.5: Monetize your site, brand new VideoPress, and many new shortcodes and widgets by Richard Muscat (Jetpack for WordPress)
New Jetpack release including site monetization tools, ad-free video hosting, new shortcodes and sidebar widgets.

How 1995! JetPack v4.5 now has a widget for “blog stats: a simple stat counter to display page views on the front end of your site.”


Welcome to Jetpack 4.5, available now for upgrade or installation. We’re starting the year in style with some very exciting additions and improvements that we can’t wait for you to try. This release includes:

  • Jetpack Ads (WordAds)
  • Brand new VideoPress
  • New shortcode support
  • More sidebar widgets
  • An update to our Terms of Service

Continue reading “Jetpack 4.5: Monetize your site, brand new VideoPress, and many new shortcodes and widgets | Jetpack for WordPress”