User:Boffosocko.com/wordpress-draft

From IndieWeb


A draft for reworking the more developer-centric version of the current page at Getting_Started_on_WordPress. Anyone is more than welcome to jump in and edit this page which we'll swap out with the other one and move the original to a more dev-friendly location.

Guidelines:

  • Generation 2/3 level language only
  • It should be simple and very opinionated to get people set up and working in as short a time as possible. Some basic WordPress prior use can be assumed.
  • Once they've got something set up and know roughly why it is that way, then they can branch off and choose other themes, plugins, play with options, etc.
  • Ideally nothing should be described that isn't manage-able via GUI. (ie no dev-talk, no command line)
  • Keep the if this then that to an absolute minimum. there are many ways to do things, choose the easiest to get them going. leave alternate methods to other pages.

To Do List:




By using WordPress on your own domain, you are already a part of the IndieWeb. Below are some suggestions to help you get started with upgrading your WordPress site to support additional IndieWeb philosophies and technologies.

Overview

These relatively short instructions are targeted at people with little to no coding or development experience. We'll attempt to take you from a basic WordPress.org-based website to supporting a broad variety of new features, functionality, and interaction on the web. To a great extent, you'll have a website that can recreate the functionality of hundreds of social media sites on the web, but in a way that you control and where you'll own all of your own data.

If not already, you will become aware that the outlined steps below are by no means the only ways to do these things. Our goal is to help get people set up with a solid basic core for a website that will allow them to easily post content and interact with other people and websites as quickly as possible. We'll do our best to describe why we're making some of the basic choices and recommendations we do with the knowledge that, once the foundations are in place and working, you can more easily begin to make tweaks and changes to your website to further customize it to your needs and desires.

Keep in mind that these steps don't need to be done all at once. Small steady improvements are easier to handle and troubleshoot. It's also easier to understand the new functionality you're adding if you do it in smaller steps.

Additional documentation can be found within the other WordPress related pages as well as within IndieWeb examples throughout the wiki for those who would like to extend, improve, or further automate the functionalities described below.

Additional Help

If at any point you need help or assistance, please feel free to ask in the IndieWeb online web chat. (We really are happy to help!)

You can also find useful help in person at local (or virtual) Homebrew Website Clubs and IndieWebCamps.


If you've got the ability to set up WordPress yourself (or find the documentation online, e.g. Tutorial: Set up an IndieWebSite using WordPress on the Amazon cloud and are able to follow it), you should be able to follow the following documentation to add a lot of additional IndieWeb functionality to your site in a very short amount of time.

If you've got a self-hosted WordPress site already up and running, installing & configuring some additional plugins will be even easier.

In addition to the specifics below there are some additional video/pencast resources that are particular to WordPress and IndieWeb which are geared toward beginners which may be helpful in understanding some of the bigger pieces of the IndieWeb and then initially setting up one's site:


Prerequisites

For the sake of this document, we'll presume you've got a domain name already set up with hosting and have installed WordPress on it.

  • If not, to get a domain and web hosting service, see: Getting Started.
  • Additionally, there are a huge number of sites which can help with these portions if you need them. A good place to start if you do need help is Download WordPress from WordPress.org. Most hosting companies provide detailed installation instructions if not one button installations as well.

Some of indieweb philosophy is about building/adding what is useful to you, so if you don't need or want pieces of functionality, please feel free to skip sections as necessary, though be aware some portions may be prerequisites for others.


WordPress out of the Box

Because WordPress is such a robust and well-developed content management system with a long history on the internet, it provides a lot of great functionality out of the box. This includes:

  • Simply installing WordPress on your own domain means you own your own personal domain and have a presence on the web
  • You can immediately begin publishing your own posts
  • Permalinks are built into the system
  • If you checked the box during set up (or change it in settings later), robots/search engines are able to index your site to help others find it
  • Your content can be posted in HTML
  • You have a simple user interface for searching your posts
  • You have very basic access to multiple common post types including: articles, notes, bookmarks, photos, videos, audio
  • There is usually simple linear previous/next navigation between posts (possibly theme dependent)
  • You should be able to show search results on your own site

Below, we'll discuss adding the additional IndieWeb-related pieces which weren't included out of the box.


Microformats and Themes

Some of the most basic functionality within the IndieWeb community is enabled by the proper use of microformats. These are small bits of code on your website that tell other computers what various portions of your web page are and what they represent.

While one doesn't need to know much, if anything, about microformats, suffice it to say that they're relatively important for supporting a variety of communication protocols within the IndieWeb. Microformats are primarily handled by one's WordPress theme. Because there are currently not many WordPress themes which properly implement modern versions of microformats, we highly recommend starting out using either Sempress or Independent Publisher which do an excellent job of integrating microformats version 2.

Eventually you may wish to change the look and feel of your website. You'll be able to do this by installing and activating different themes. WordPress itself and many themes provide some reasonable support for the first version of microformats, but we typically don't recommend using them until you're more comfortable with how your website is working and how microformats are (or aren't) built into your theme and site.

TK: step-by-step instructions for downloading and activating one of these themes here


Identity

Indieweb Plugin

The Indieweb Plugin is a plugin with an installer interface that includes a bundle of several useful related standalone plugins that can help you quickly get set up to be a more active member of the Indieweb. Many of these plugins will be described below. Others may be described at WordPress/Plugins or on their own pages.

Rel-me

Main article: rel-me

One of the first things you will want to set up are rel-me links to your other profiles on the web. This will enable web-sign-in and IndieAuth using your domain as your identity. You can then sign into this wiki and begin wikifying.

Self-hosted WordPress

The easiest way to add rel="me" support to your site is to install the Indieweb Plugin. This will add several common social media site fields to your "Edit User" page in the admin panel at yoursite.example.com/wp-admin/profile.php. (Be sure to change this URL to include your particular domain.) Fill these in with the usernames for your identities on the various services you use (Telephone, Github username, Google+ userID (not username), Twitter username (without @), Facebook ID, Last.fm username, Instagram username, Flickr username) and the plugin will create the proper (invisible) rel-me links in the head of your site. There is a field at the bottom of the "Edit User" page that one can list additional URLs for adding rel-me to as well. The rel-me and WordPress with Bridgy#Rel-me links pages can provide additional information if necessary.

If you view the source for your website afterwards, you'll see a number of links like <link rel="me" href="https://twitter.com/username" /> in the <head>. If you want the links to be visible on your site, you can use the rel-me widget, which will replace the hidden links with icons.

Now that your site has rel-me links pointing to your presences on several services, log into those services and include the URL of your site in the appropriate website fields of your profile so that they point back to your website in return. Having the ability to add rel-me links in your sites helps to indicate your ownership of them.

Some services like Twitter and Instagram, which only allow one URL in your profile, support putting a second URL into your bio field if you have second personal site. Examples: Kevin Marks and Chris Aldrich have indiewebified primary and secondary sites.


Authentication

As an additional test you should now be able to use your domain name to log into this wiki using your domain name. You'll be redirected to an IndieAuth page which will present you with a list of supported providers for login.

You can then begin wikifying yourself and the rest of the site here.

IndieAuth Plugin

Via the Indieweb Plugin or from the WordPress repository, you can install and activate the IndieAuth Plugin.

It offers two different functions. It can act as an IndieAuth endpoint to third-party sites, alowing you to use your WordPress credentials to authenticate to other sites, or authorize them to log in on your behalf(such as posting clients). Or it supports web sign-in(using your domain) into your site using a third-party site.

Identity

Next you'll want to add an h-card to your homepage. An h-card can be thought of as the internet version of a business card or name card. Typically it will have your name, a photo, and some contact information. Like a business card, you can pick and choose what details to put on it.

The quickest way to create one is to fill in all of the public facing personal details you'd like to present in your h-card at http://YOURSITE.COM/wp-admin/profile.php. Next, on your widgets configuration page (http://example.com/wp-admin/widgets.php), place the "H-Card Widget" in an agreeable sidebar, footer, other available location for your theme. Configure the few options for the widget if necessary.


Post Types

To quickly and easily support a broad array of post types (with the correct microformats) install the Post Kinds plugin (also bundled in the Indieweb plugin). The following post types are supported natively: article, reply, repost, like, favorite, bookmark, photo, listen, watch, wish, play, jam, read, and mood with others forthcoming in future development work. The plugin's admin interface is simple and intuitive and auto-scrapes data from sites for post types that use an input URL. It also employs oEmbed well in the post too.

POSSE

"Post on your own site, syndicate elsewhere" is a cornerstone of the IndieWeb community. There are literally dozens of ways to implement it. The quickest and easiest of them is to enable WordPress's JetPack plugin and configure the Publicize module within it to syndicate your content quickly to the common silos like Facebook, Twitter, Google+, Tumblr, and LinkedIn. There's even a simple checkbox interface in the admin UI for choosing which silos you'd like to syndicate to. (Alternate POSSE plugins and methods can be found at WordPress/Plugins#POSSE Plugins.)

Syndication Links

A POSSE workflow is always nicer when one can provide links on one's site to the syndicated copies. The quickest way to do this is to install and activate Syndication Links which is also included in the IndieWeb plugin. This plugin provides a text box in the admin UI for posts which one can include the permalinks of the POSSE copies of one's original content. These permalinks are automatically properly wrapped in the appropriate microformats for other services to do original-post-discovery. Options in the plugin allow one to choose between text and either a color or black/white icon set for display. The plugin also has code for automatically importing/storing these permalinks based on other POSSE plugins including support for SNAP as well as Tumblr CrossPoster, WordPress CrossPoster, Diaposter (for Diaspora), Medium, and Mastadon AutoPoster. Integrations may be possible with other POSSE plugins on request. Unfortunately, this doesn't extend to the JetPack suggestion above due inability to retrieve the URL, so one will need to copy and paste the POSSE urls into Syndication Links manually. But then again, manual until it hurts is often worthwhile.

Webmentions

@Mentions, the ability for one webpage or post to let another know the first has linked to the second, were popularized by Twitter, but are also built into services like Facebook and Medium. Unfortunately these mentions only work within the specific site and do not inter-operate from site to site.

In IndieWeb, we use an open protocol called webmention, which is a W3C recommendation, to allow independently operated sites to interact with each other just the way @mentions do on Twitter and other services. For those familiar with pingbacks or trackbacks in WordPress, webmentions are very similar, but are more secure, robust, and, importantly, display much better.

To enable this functionality the Webmention Plugin allows you to both send and receive webmentions by adding support to WordPress. Mentions sent to your site will show up as comments to posts or pages on your site. To use it you will want to install and active both the Webmention Plugin (for basic webmention functionality) and the Semantic Linkbacks plugin(which will handle making the webmentions format properly within your comments section).

Configuration

Neither of the two plugins requires any real configuration as the defaults are generally used by most.

The Webmention plugin respects the Discussion settings about Notifying other blogs when they are mentioned, but also has its own settings page which can be configured. These are generally self-explanatory and are as follows:

  • Disable self-pings on the same URL (for example "http://example.com/?p=123")
  • Disable self-pings on the same Domain (for example "example.com")
  • Enable Webmention Support for Pages (otherwise Webmention is only set up for posts)
  • Automatically approve Webmention from these domains (to auto approve by incoming domain)
  • Show a Webmention form at the comment section, to enable manual pings. (This shows a small UI box at the bottom of your posts/pages to let people who don't have webmention enabled to manually send you webmentions.)
  • Customize the explanatory text for the form
  • Set a page for mentions of the homepage to be sent to
  • Show avatars on webmentions when possible

For homepage webmentions, some people prefer not to show them as comments there, but on a separate mentions page. If this is the case, one should create a new page with an appropriate name (many use "Mentions"), designate it as public or private depending on your preference, and save it. Then revisit the settings page above and select that page name from the dropdown menu. Now when people send webmentions to your home page, they will be collected at the designated page.

Semantic Linkbacks has settings to display mentions as Facepiles.

WebSub

Naturally one wants a better way to tell the world when one updates one's site with a new post. This is best done with WebSub (fka PubSubHubbub) (PuSH) support for posts and it can be handled by installing and activating the PubSubHubbub plugin. No configuration is really necessary as it comes preconfigured with custom hubs Superfeedr at http://pubsubhubbub.superfeedr.com and http://pubsubhubbub.appspot.com. Others could be added if desired.


Handling Responses

One would generally like to have one's site be able to handle responses from other sites. Toward this end, one wants to be able to receive webmentions and display comments on every post type you publish. The webmention plugin discussed above handles both the sending and receiving of webmentions, so that is already covered. To better display these received webmentions one wants to install and activate the following plugin:

  • Semantic Linkbacks - makes indieweb comments look better on your site, recognizing them as being likes, replies, etc. and displaying appropriately.


Accept Backfeed

In addition to crossposting one's content to silos, ideally one would also like to accept comments, replies, likes, and other reactions to these copies back on one's own site. This is known in the IndieWeb community as backfeed.

The easiest way to implement backfeed on WordPress is to support webmentions (enabled above) and have properly configured rel-me links (see above) and connecting one's site to Bridgy. Bridgy then handles crawling one's copies on other sites, finding the original posts, and then sending webmentions so those posts to appear as comments. Detailed instructions for doing this are described separately at WordPress with Bridgy.


IndieAuth plugin

Crossposting / Syndicating content


Next Steps

These basic steps will take one's site a long way towards supporting some of the most common and powerful IndieWeb technologies that currently exist.

Naturally, there are alternate ways of adding some of the functionalities described above using alternate methods or plugins. Some of these can be found on the Advanced_WordPress_Set_Up page, within WordPress/Plugins, on other related WordPress pages, or within other parts of the wiki. Further, many pages in the wiki include examples of functionality, UI/UX, and even brainstorming for ideas that continue to extend the value and power of the independent web. We invite you to explore and experiment to help create the internet you'd like to have for yourself.

Users are also welcome to try other methods of attack, some of which are enumerated at Advanced WordPress Set Up, in other WordPress related pages, or spread throughout the wiki on topic pages. Naturally, everyone is welcome to try their hand at writing their own code and self-dogfooding their work. Most, if not all of the plugins mentioned, are open sourced and can be found on Github if one wants to contribute code or documentation, report bugs, or suggestions.


FAQ

Keep these to be very basic level!!

Why does the comment on my site not show the author's information?
Why does the comment show a link to bridgy.appspot.com instead of the social network?
Please ensure that you have both the Webmention plugin and the Semantic Linkbacks plugin installed.
WordPress seems to be blocking Bridgy
The WordPress service in Bridgy is only meant for people using WordPress.com who can't install the indieweb plugins from WordPress.org (or GitHub) themselves on their own server. If you're using WordPress.org self-hosted code, then you just need to connect Brid.gy to your social media sites (Twitter, Facebook, etc.)
Where can I find help or assistance with adding Indieweb technology to my WordPress installation?
Try the WordPress_Outreach_Club or ask your question in the IRC channel. If you think you've found a bug, feel free to file an issue in the github repository for the particular plugin you're having problems with.


WordPress
Topics Getting Started on WordPress β€’ Advanced WordPress Set Up β€’ Plugins β€’ Themes β€’ Examples β€’ WordPress with Bridgy β€’ Development β€’ Data β€’ Security
Primary Plugins Indieweb Plugin β€’ Webmention β€’ Semantic Linkbacks β€’ Micropub β€’ IndieAuth β€’ Post Kinds β€’ Syndication Links β€’ WebSub plugins
POSSE Plugins Syndication Links β€’ Social Network Auto Poster β€’ JetPack Publicize β€’ WP Crosspost β€’ Tumblr Crosspostr β€’ Diasposter β€’ Mastodon Autopost β€’ Bridgy Publish plugin (deprecated) β€’ Medium (deprecated)
PESOS Plugins Keyring Social Importers β€’ DsgnWrks Twitter Importer β€’ DsgnWrks Instagram Importer
Other Plugins IndieBlocks β€’ Shortnotes β€’ ActivityPub Plugin β€’ Aperture β€’ Refback plugin β€’ IndieWeb Press This β€’ WordPress MF2 Feeds Plugin β€’ WordPress uf2 β€’ OpenID β€’ Simple Location β€’ Parse This β€’ Indieweb Actions β€’ PressForward β€’ Yarns Indie Reader β€’ WhisperFollow β€’ blogroll2email
Themes SemPress β€’ (SemPress Child Themes: SemPress Lite, SenPress, and Index) β€’ Autonomie β€’ Independent Publisher β€’ IndieWeb Publisher β€’ mf2_s β€’ Twenty Sixteen IndieWeb-friendly fork β€’ IndieWeb Twenty Fifteen Theme β€’ Doublescores
Assistance Join the #indieweb chat β€’ IRC and other chat options β€’ WordPress FAQ β€’ WordPress Outreach Club β€’ Troubleshooting Tips β€’ WordPress tools β€’ WordPress channel
See also WordPress related wiki pages β€’ Category:WordPress plugins β€’ Category:WordPress themes β€’ Category:WordPress sessions β€’ WordPress.com β€’ WordPress using IndieMark β€’ AWS Tutorial



See Also

Include or not? As you complete steps, try plugging your site into indiewebify.me. It will give you instant feedback, confirming that it's working or helping you fix it if not.

If your site has multiple Wordpress users, and you want to use it as an Indieweb site for one of the users, change the Indieweb identity settings in its "Options" pane:

  • click IndieWeb in the admin sidebar
  • click Options under the IndieWeb item in the admin sidebar
  • In the main window:
    • Check: Single Author Site [x]
    • Pick yourself in Default Author _____v drop down menu.
    • Save Changes


You can now test your rel-me setup with: IndieWebify.Me Web Sign In validator

Nota bene: In late July 2016, IndieWebify.Me was having problems which may cause it to return incorrect results. If you think this may be the case, you can do an additional test described in "Authentication" below.


Alternately, you might use the h-card creator to create the mark up for your card and place it in a widget or on a particular page.