begin slide 1

Give Me Random or Give Me…

The Trick, Said Quick

Create a link on your WordPress site to a randomly selected post with just 6 extra characters added to your web address… Give visitors a way to wander down your wondrous halls, and bust up the dominant reverse chronology dominance of posts.

It’s like… magic.

The QRS Wheel of (mis)Fortune flickr photo by Kris Krug shared under a Creative Commons (BY-NC-ND) license

The Trick, In Intricate

To generate a link to a random post you can mess with plugins or go crazy with custom code as I have done (and again).

It’s way easier than you might think.

Okay, start with the URL to your WordPress site. Okay, I know mine! It’s http://cogdogblog.com/.

Then… just tack on ?random to the end.

Go. CogDogBlog gives you a random post http://cogdogblog.com/?random.

Use these in your menus, sidebars, send to your parents?

Sadly, it does not seem to work within category or tag archives. Also, it will only work (I am mostly guessing) on blogs that have a normal WordPress Loop on the front of the site. So it will not work on The PressEd 2019 site (https://2019.pressedconf.org/?random) nor on the DS106 site https://ds106.us/?random because they have different front page content.

But this does work on WordPress.com hosted sites, maybe Samantha Clarke’s https://seriousgameslife.wordpress.com/?random.

Even a random “slide” from this presentation http://show.cogdog.casa/pressed19/?random.

The Trick, Done Slick

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Katrin B. from Pixabay

end slide 1

begin slide 2

No Sleight of Hand Just Some Redirection

The Trick, Said Quick

Manage moved links or create custom short links to external sites by setting up a redirect inside your WordPress site.

The Trick, In Intricate

If you are a little like me, you loathe broken links for finding that the link you clicked results in a 404 error.

On your own WordPress site, you can keep the web from being a bigger miss of broken links if you have moved a post or page elsewhere (even to another site) by using a plugin that manages web redirection. This is done in a way where a click from, say https://cogdogblog.com/you-broke-the-web/ can be automatically sent to maybe a new URL in the same site. Or one like https://cogdogblog.com/you-killed-the-web/ can go somewhere outside.

These examples are done with the Quick Page/Post Redirect Plugin. This adds a post meta box to a post/page editor that enables you to turn that WordPress page/post into a redirect.

First check the box to turn this from WordPress content into a redirect. You will still want to create a title for it, mainly to generate it’s permalin editor, but it’s also good to you can tell in the listing of posts and pages.

Then enter the URl where you want to send users you come to this link, say https://2019.pressedconf.org/.

Finally, set up the permalink to have the URL you want to act like a redirect on your own site (Pages work best in general so you don’t get the permalink extras for blog posts. So in this example, some site with a page whose address is /best-conference-ever will redirect visitors to the desired destination. Try it! https://cogdogblog.com/2019/04/best-conference-ever/.

It also shows up clearly in your dashboard as a redirect:

I’ve found some special cases where redirection is useful to get around theme limitations. For the Cover theme I use in my own blog and also on Networked Narratives, the top slider displays posts tagged with a special owner defined tag.

For NetNarr, I wanted to have the event pages for our studio visits show up there, but they are WordPress Pages. But I used this plugin to create a new post, add the redirect to the studio page, and include the special tag to put in the slider.

For example, this event page is a standard WordPress page http://netnarr.arganee.world/studio-visits/alex-saum/. To create something to have it appear in the web site slider at the top, I made a new blog post, set up the re-direct as show above, and set the featured image for the redirect post to use the same one as the page. So see how this URL (a post) redirects to the page I want.

The nice thing about this plugin is, in addition to the featured image, I can also write the excerpt I want it to use to make it appear on the front of my site, and set categories and tags so it shows up among other content.

I have also used the Redirection plugin on sites where I need only to forward visitors elsewhere (the feature image, et al not needed). I have a few sites where I want to do more or less what short URLs do to create a more readable URL to say a Google Doc URL or some other one that is long and convoluted.

The Trick, Done Slick

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured Image by Katrin B. from Pixabay

end slide 2

begin slide 3

Hidden Wealth in the Rich Text Editor

The Trick, Said Quick

Whether you favor WordPress editing Classic or Gutenberg, I have a few gold nuggets that are not obvious from the visual a.k.a rich text editor.

The Trick, In Intricate

Before WordPress 5 and the Gutenburg flavored editor, I lived in the WordPress Text editor– I love seeing raw HTML. Those days are gone; even with the Classic Block, I cannot get to the Text Editor.

One thing I never found in the visual editor, pre or post Gutenberg editor, was the thing that gives me formatting for code, which I like to do in text when describing things to do in an interface.  Where is the code button that was in the old Text editor? With some googling, I found a secret trick that works in either the visual editor, pre or post Gutenberg.

It’s right out of Markdown… which makes people more freaked out than saying HTML. But if I want to emphasize a bit of text in code formatting, I just type a back tick before the text and another one after.

In the Classic editor, you can find a range of keyboard shortcuts for formatting from the question mark icon (hopefully you know about the “kitchen sink” reveal button— the second row of editor buttons that appear when you click the last icon on the right).

There actually are more conventions from Markdown that work in the rich text editor(s)- these are listed in the keyboard shortcuts window:

This more or less means you can use Markdown in the WordPress editor. I was actually unaware of all of these! The same command opens the shortcuts (command-option-h) in the Gutenberg Editor (it’s also available from the three dot menu in the far right top corner); There are more shortcuts related to blocks, and it does not display the Markdown ones, though they still work.

Gutenberg keyboard shortcut list

 

Do you know about drag and drop images? You can upload directly to WordPress by dragging an image file from your computer directly into the editing area (classic) or between blocks (Gutenberg). Just give it a try!

One thing that is very sweet in the Gutenberg Editor that you can copy HTML from some other source, paste it into the paragraph block, and it renders properly, fully formatted (in the classic editor you just get code). This is really useful, as I can copy the HTML created with my flickr cc attribution helper tool, paste it directly into a paragraph block, and get the fully formatted content.

Let’s say I want to use it on an image of a Scary Black Pigeon. I get this blog of HTML generated:

Almost by accident I saw what happened- I pasted the raw HTML into a new block… and I get this automatically:

The Scary Black Chicken

The Scary Black Chicken flickr photo by cogdogblog shared under a Creative Commons (BY) license

Unlike most WordPress users, I have taken somewhat of a liking to the new editor, or at least less of a cussing relationship; see my post about blogging on a Gutenberger diet.

See also WP Beginner’s Time Saving WordPress shortcuts.

The Trick, Give it a Kick

Tweet back a reply with a rich text editor tip you tried and/or know about.


Featured dog trick image by Yama Zsuzsanna Márkus from Pixabay

end slide 3

begin slide 4

Dynamic, Automatic Indices of Pages

The Trick, Said Quick

Use a plugin to display an index of content created as WordPress Pages; if you re-organize the order, add new content, the index is always up to date.

The Trick, In Intricate

WordPress Pages are ideal for organizing content in outline structure, rather than date-oriented format of Posts. This might be useful for book like content, where the index is a table of contents. Or maybe it is a series of events or course resources.

The Page Attributes settings allow you to manage the order in which they are displayed, and using existing Pages as parents allows for a hierarchical structure of subpages (and subpages of subpages).

The Page-List plugin provides a versatile way to display an index of pages, or a portion thereof, by simple use of shortcodes in your post (it’s a human usable front end for the WordPress code function wp_list_pages).

At it’s simplest level, using the shortcode [pagelist] anywhere in a editing screen will create a full sitemap of all Page content on your site. More handy is within a page structure, using something like [subpages] will list all Pages that are children of a current page and [siblings] list other Pages at the same level in the hierarchy. I often use [pagelist_ext] because it can use the featured images of the pages as icons and also include ane excerpt as well.

All of these shortcodes include more options you can use to control the output.

For one example of use, I used a Page Structure to organize a week of mini-lessons for the Ontario Extend Project Domain Camp.

The Domain Camp Page is the main entry, and includes sub-pages for each week:

A one level subpage structure for a series of activities under “Domain Camp”

The order of listing is not defined by date (later ones are below), but using the Page Attributes in each subpage.

Set the parent page to make this a subpage, and use numbers on the Order field to control list order

By making this Page have a parent of Domain Camp makes it a subpage. The Order values need not be sequential, so often I will leave gaps between to leave room for changes later (like I might use 1,5,10,15,20) or even 10,20,30,40 for a possibly complex page order).

Without assigning a Order value, pages will be listed in alphabetical order.

For the main index page of Domain Camp, in my editor i simply use [pagelist_ext image_width="180"] to generate this list every time the page loads:

How the plugin renders the index from the shortcode

The amount of excerpt listed for the subpage can be set by the limit_content parameter in the short tag, but also is better controlled by use of the more tag in editing the sub pages.

For each subpage, I put at the bottom the shortcode [siblings] to list all the other subpages so a reader can navigate to another unit quickly. This looks like on say the Week 2 page:

A navigation to other pages at the same level of the current one. The bold style indicates the current page in view.

The major advantage of this is I can start a site with maybe just one subpage (like in a course), and as I add more, all of these indices are always updated to reflect the current structure of the Pages on this site.

This plugin is rather powerful, especially as you explore the other options you can use; I have put it to use on many sites.

For a similar kind of trick to use with Posts, see the Display Posts Shortcode plugin. And if you are looking for an alternative way to order posts, pages try the Simple Custom Post Order plugin.

The Trick, Done Slick

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Katrin B. from Pixabay

end slide 4

begin slide 5

Little Big Trick: Bulk Editing

The Trick, Said Quick

Make changes to a whole lot of posts, all at once.

The Trick, In Intricate

Sometimes you just need to do some house cleaning- add new tags or categories to posts to organize them better. Or maybe change the author. Or switch a pile of published posts to draft. Or maybe turn comments on or off.

There’s no need to tediously edit and save one by one when you can do them all at once. Bulk Edit is here to save the day.

The first part of the trick is using the various tools in the WordPress posts (or pags) dashboard listing to filter out the posts to edit. You have choices to do this by month published, by category, by keyword search, or even using the numerical page counter to jump pack in time.

If you want to edit more at a time, here is a bonus truck. Click Screen Options in the upper right, and bump up the number per page value from 20 to higher (I once did 500).

Change the number of posts you see per screen in the posts dashboarrd

Then check the boxes next to the posts that you wish to edit at once (or click the box at the top to select all on the screen). From the Bulk Actions menu (top left) select Edit and click Apply.

Now you can make changes to all selected posts. The left side of the pane shows the titles of all posts that will be affected.

You can:

  • Add Categories to all posts
  • Add Tags to all posts
  • Change the author of all posts
  • Turn comments on or off for all posts
  • Set the status of all posts (e.g. draft, publish)

plus a few more things rarely used (Post format? Make ’em all sticky?).

The one limitation is that you can add categories and tags but you cannot remove (if someone knows a bulk way of doing that, outside of complex database queries, please let me know).

If you every doing these changes on just one post, try the Quick Edit link that appears when you hover over a post title- you can do these more quickly then jumping into the full editor if it’s a simple change to one of the above items.

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Free-Photos from Pixabay

end slide 5

begin slide 6

Care for Permalinks

The Trick, Said Quick

Avoid creating long unwieldy blog urls labeled “uncategorized” — make your links pretty or meaningful or at least not what the default settings WordPress gives you.

The Trick, In Intricate

At one time on the web, people looked at web links. These days, many are squashed through shorteners (e.g. all tweeted links), and maybe we don’t give thought to what our links look like.

We ship around Google Doc links like https://docs.google.com/document/d/1F3834ewt-LvqFaMD-yfVnfg_ExCj9nVZV98FQtmo2Gc/edit?usp=sharing a link only an engineer can love.

But with a little TLC to the Permalink settings in your WordPress site, you can rise above the crowd and master your own links.

In your dashboard, visit Permalinks under the Settings menu. Just so you know, to WordPress, all links to your blog look something like http://yourreallycoolsite.zork/?p=2367 That p=2367 is just a reference to where your post is stored in the database.

But in its wizardry, WordPress offers a means to rewrite your site URLs, so to you, and the world, you can use more human readable web links like http://yourreallycoolsite.zork/2019/the-brilliance-of-me.

All of this is done in your WordPress dashboard, selecting Permalinks from the Settings menu. The default selection is what most people end up with:

Permalinks setting, shown is the default setting of “/%category%/%postname%/”

The things surrounded by % signs are place holders for what WordPress will fill in for you- %category% is the short name for the category the blog post is put in and %postname% is a URL converted form of the title, where it converts everything to lower case and replaces blanks with -. In many cases this is fine, and is a worthy option.

But typically two things can happen. One is that many new users do not set up or use WordPress categories, and the default one is always Uncategorized. Second, if you have a really long title, your blog URLs are long too. Your publishing activity is then released out as something like:

A blog post with a long title and no categories set will get published with a rather unsightly URL. This is showing the new Gutenberg editor interface; for the Classic editor, the permalink is shown below the post title.

A first thing is to change the name of your default category (and or maybe add a few ones to use, it makes sense to categorize your posts before you have a big pile), by selecting Categories from the Posts menu in the dashboard.

Hover over “Uncategorized” and click edit to change the name and slug (name used in the URL) of the default category. Heck, why not add a few more while you are there?

You might choose General or News or Thoughts or Stuff as category names.

The other thing you can do is edit down the long title in the box above the shown URL. You could end up with something more palatable like:

For many people, it’s useful to have date information in the permalink so at a glance it can tell you or a reader when it was written; you then might use the permalink options Day and Name or Month and Name. Both will still require a manual permalink edit to shorten the URL of a long blog post title (note that in the new Gutenberg editor it does not show the final link name until you publish).

This bit of fiddling can show the world that your posts are not uncategorized and maybe easier to share.

The Trick, Done Slick

You can also design other structures, if the title and or date in the name is not important. You can use the buttons at the bottom to design almost any kind of format.

  • /%year%/%post_id%/ short but shows the year http://journal.arganee.world/2018/219/
  • /%post_id%/ as short as it gets http://splot.ca/collector/286/ or heck, this URL http://show.cogdog.casa/pressed19/238/
  • /%year%/%month%/%postname%/ month, year and post name https://cogdogblog.com/2019/04/as-in-enabling-the-unanticipated/
  • /%postname%/ Just the name of the post https://bavatuesdays.com/reclaim-the-robot/

There is no better than other way to do it; it’s just a personal taste issue (for those that read URLs).

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this? If anything, make sure you vanquish the uncategorized from your posts!


Featured dog trick image by Katrin B. from Pixabay

end slide 6

begin slide 7

Put That Widget into a Post or Page

The Trick, Said Quick

Put the capabilities of widgets to work outside of sidebars and footers- set them loose in your pages and posts.

The Trick, In Intricate

Widgets are a handy way to organize and put dynamic content into your blog’s preset sidebars and footers. But why not let them do the same in perhaps a post or a page?

I’ve done this to display RSS feeds. or post tag clouds, but any widget that WordPress comes with or you can add with a plugin, can be yours too.

A few plugins are available to do this, I have used Widgets on Pages. After installing/activating the plugin, use its dashboard interface to add a new “Turbo Sidebar” merely a name for a placeholder widget area. I’m planning to add an RSS Feed to mine.

Give Sidebar a name, and note that you can copy the code here you can use when it’s time to insert in a Page/Post.

Creating a new sidebar named “Got Feeds” and showing that the shortcode to copy is [widgets_on_pages id=”Got Feeds”]… note that in my tests, the shortcode will not work .Copy the shortcode that shows up in the widget

Then navigate to your Widgets via the Appearance menu. You will see a new widget area is added that works like any other one- you can add any number of widgets you like here.

A new widget area is available

I added a text widget with some introductory text, and then used the RSS Widget to display the latest posts from one of the best blogs out there that still publish regularly.

Right now nothing will change on our site. But we now create a new page for where we might want to include an RSS feed. Write some text, set up a featured image, and add the shortcode that is in the top of the widget area– in my case it was

[widgets_on_pages id="1"]

and you might get a page on your blog with a full RSS feed like http://summerfun.extendlabs.ca/blogs-are-not-dead-yet/

If you prefer, here is a video from the plugin developer to walk you through the steps.

The Trick, Done Slick

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Katrin B. from Pixabay

end slide 7

begin slide 8

Remake the Blog Post Layout With a Fancy Tiled Look

The Trick, Said Quick

Use the WP-Tiles plugin to create a visual mosaic grid view for your site’s blog posts (or category within).

The Trick, In Intricate

This may be the best trick in the stack of tweets. What if you could re-deploy the blog post layout of your site into some kind of large mural/wall of images? Or just create a more visually appealing way to display posts in a category or by tag?

The WP Tiles plugin is your new friend. It creates a Tiled layout using featured images; it comes with a set of possible grids to use; but with the grid editor you can design your own.

The “Simple” WP Tiles Grid; the layout can be customized (or new ones made) by using the grid editor.

You can access the tile creator in the WordPress Editor (for Gutenberg, it’s there in the Classic block)

Accessing WP Tiles in Gutenberg (use Classic block)

And it provides a wide range of settings for selecting content and displaying it, as well as some preset settings (e.g. last 20 posts).

Shortcode Settings for WP Tiles

So the typical layout for the TRU Collector SPLOT is already got this kind of style; see http://splot.ca/collector.

But the WP Tiles plugin let’s you experiment more, and also create a layout where the display order is random, not newest first. See http://splot.ca/collector/mural/

So you can use WP-Tiles on an internal page, but if you prefer, you can use the WordPress Settings (under Reading) to make that the front page of your site. That is the set up used on the Networked Narratives Somni Porta site, where the front page is rotated to represent a new activity, and WP-Tiles is used at the bottom to show the current items submitted in a category.

For more, see Tiling SPLOTs the Easy Way; Maybe Soon Everything Else (CogDogBlog) and the WP-Tiles site.

The Trick, Done Slick

All of these seem to be SPLOT related, but that’s not the limit of what the plugin could do, just ones I have done or know of!

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Tatyana Kazakova from Pixabay

end slide 8

begin slide 9

Randomize Those Header Images

The Trick, Said Quick

Most WordPress themes make use of an image at the top of the site (header image) that is easily set in the Customizer. But why limit yourself to one image when you can make them random on different pages?

The Trick, In Intricate

Not all themes make use of Header Images, but most do. And if anything can make a blog more dynamic, it’s a bit of visual random magic.

The first thing to do is (after logging into your site) click Customize in the black admin bar if you are viewing your site. Or if you are in the Dashboard, Select Customize from under the Appearance menu.

There’s much more to the Customizer worth exploring here, but a huge advantage over making changes in the dashboard is you can preview the way it looks as you try new settings. And if you mess things up, just exit without publishing.

From the left side in the customizer, open the pane for Header Image (if you do not see one, then the theme does not use one, so this trick is pointless).

Anyhow, if you do have one, you can upload an image to use- it’s best if the image is large; you will be asked to crop it to fit the size allowed by the theme.

Here is the Customizer for my own page at http://cog.dog which uses a theme I build called WP-Dimension; it uses the Header Image for the background image.

WordPress Customizer opened to the Header Image pane, showing selection of a dog’s head and how it appears on the site on the right.

And you can stop there, with one header image. But if you want some variety, add a few more Header Images. Scroll to the bottom of the list of Header Images, and click the button for Randomize Header Images. Publish your changes.

Now, every page on your site that uses the Header Image will have a randomly selected header image (it might be just the home page or it might be them all, depending on the theme).

Every reload of https://cog.dog/ gets a new dog.

Ahh, once you go random, there’s no return.

The Trick, Done Slick

  • The Virtually Connecting site (using the MH Magazine Lite theme) has more of a blog header style image, full page width but not very tall. It has almost 50 random header images!
  • My Best in Show site (uses the Hitchcock theme) uses a few different header images that show up in the background of the title. I should add more!

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Karsten Paulick from Pixabay

end slide 9

begin slide 10

Full Control of Tweeted (and Facebooked I Guess) Links aka OpenGraph

The Trick, Said Quick

Fine tune and craft the way your shared WordPress posts appear as Twitter Cards (and in Facebook)… fully manage the Open Graph tags.

The Trick, In Intricate

The OpenGraph protocol defines how links from your site appear in social media platforms. You can use plugins to manage what content is added to your posts (as metadata, stuff you don’t see unless you view the HTML source of your pages) that can be more specific then what the platforms do on their own.

If you look up Twitter Cards you will get some information surrounded by a lot of marketing and SEO verbiage. Managing them in your site can give you more control over the image or media used, and the additional text that is shown when a link you tweet is published in twitter.

You can check any web address on your site with the Twitter Card validator… does it represent your content well?

Perhaps the easiest way is to deploy them on your WordPress site is with the JetPack plugin — it’s Publicize module will generate a basic set of Open Graph tags. It will use a Featured Image to share; if one is not present, it will use the first image in the Post. And it will grab the first few sentences for a description.

But what if you want it to use a specific image? And what if you want to customize the text, rather than rely on a first X words grab? And what if you don’t want all the bloat of a big plugin?

This is what I faced on this presentation site. I love the dog tricks photos used on these pages, but they don’t tell much when tweeted. And the first bits of text on these pages include a tweet and a heading.

I put to use on this site (and a few others I manage) the Open Graph for Facebook, Google+ and Twitter Card Tags plugin. Since I don’t do or care much about Facebook, I focused more on the Twitter features. But I would guess it offers good support for Facebook.

What I really like is it ads a post specific setting to each page, below the editing area (it works too in Gutenberg).

Here is an example, right in this presentation, the trick for Dynamic, Automatic Indices of Pages. With just the plugin installed, what I get is okay, but not great.

The basic card using featured image and first chunk of content

But I’d rather have a more useful image (nothing against the cute dog) and to refine the text that appears (it has a twitter URL and a bit of heading text).

Customizing the image with an uploaded version of a screenshot usd in the post, and writing the text I want to see on the twitter card

I instead have uploaded an image of the exact dimensions suggested and re-wrote the text that will appear below it, so it’s a bit more relevant when tweeted. Checking with the validator:

This card has a screenshot from the post, combined with a second one to better explain the post, plus a more concise description.

This amount of finessing may not always be needed, but you may have a future use to further customize how your WordPress content is displayed in social media. And you get more control over what you get as defaults.

You can see below how it works for this post!

Note, with some effort I was able to get JetPack to update their plugin to include the image’s alt description as metadata for the og protocol called for use of the of:image:alt metadata. I am checking the output for the plugin described here, and not seeing the image:alt in the open graph data. Time to let them know…

The Trick, Give it a Kick

Tweet back a reply with an example you tried and/or how might you use this?


Featured dog trick image by Karl Allen Lugmayer from Pixabay

end slide 10