WordPress.com: How to Create a Customized / Sectional SiteMap

TL;DR

WordPress.com hosts this site. I wanted a sectional SiteMap. Problem: I know diddly-squat ’bout coding. But I learned how to massage a “shortcode”. Walk-through follows, including precise coding.

Estimated Reading Time: 11 minutes

My Section-Based SiteMap Goal: The Structure

Each content group begins with a header.

✦︎ Blog Posts

  • Articles (reverse chronological order)
  • QuickNotes (ditto)
  • Audio (ditto)
  • Video (ditto)
  • Quotes (ditto)
  • Photography

A titles listing comprises each section. The publication date appears after the title. In all sections except Photography, the titles appear in reverse chronological posting date (i.e. most recent to oldest).

✦︎ Static Pages

  • About
  • Portfolio

⭐️ Available WordPress.com ShortCodes for SiteMap Creation

sitemap shortcode:
✦︎ recognizes only “pages,” not blog “posts

archives shortcode:
✦︎ no way to segregate by content in the listing (by time? yeppie)

display-posts shortcode:
✦︎ my bingo!

This baby empowers creation of the SiteMap of your dreams! Note: this code applies ONLY to blog posts, NOT static pages.

⭐️ Customized SiteMap Joy: the tag=  Parameter of the display-posts Shortcode

Post formats act as my site’s primary segregator. To my knowledge, no related shortcode exists. Another problem: some themes recognize some/ most/ all post formats; others belch a duhhh! when confronted with the subject.

I treat categories as broad umbrella/overview designators, which I keep to a maximum of ten. Some posts live within multiple categories. I should be ashamed, but truth: more than a few entries reside in “Uncategorized.” I resolved to cure that, after I completed my SiteMap project.

Tags solve multiple problems. Like post formats, a certain tag can be assigned to images, another to asides, etc. All themes adore tags. Once created, the same tag-induced goodness— one tap on its name presents all siblings sporting that tag —applies regardless of theme. And tags, in my hands, embrace more specific drilling down into subjects. Therefore, I chose the display-posts="tag" shortcode to power the blog component of my SiteMap.

⭐️ Creating the Customized writesquire SiteMap: The Blog Posts Section

You may want to open my SiteMap in another tab, for easier cross-referencing with the coding which follows.

1️⃣ Create a new WordPress.com page; do NOT name it “sitemap”

I’m told something named “sitemap” is built into the WordPress.com system. I suspect the same holds true for WordPress.org sites. Rather than eat time digesting the specifics, I conjured a failsafe method to avoid glitches. I added a word to the file’s name → writesquire-sitemap.

♦️ The Mechanics

Within the Pages section of the classic WordPress Admin (yoursite.com/wp-admin) area, I

  • created a new page,
  • assigned the title writesquire-sitemap, and
  • configured it as a child in the About tree.

The last step ensures all automated About page listings will include the customized SiteMap.
✅ Bare static page for SiteMap created. Potential name-induced glitch precluded.

2️⃣ Open a plain text editor for drafting the SiteMap coding.

Ulysses, Apple Notes, Word, and others instigate formatting woes. Avoid the grief with a true plain text editor. I use freebie SimpleNote. Bonuses: accessible to every device/machine platform, and MarkDown friendly.

♦️ The Mechanics

Create a new SimpleNote file: SiteMap Draft.txt. Because the entirety of this SiteMap-creation project transpired on an iPad (Pro, BigBoy version), I enjoyed the convenience of a split screen: Safari on the left; SimpleNote, on the right. Eased creation/ drafting chores.
✅ New SimpleNote file created.

3️⃣ Ignore everything except content; create a draft framework.

The SiteMap I craved would show every blog post title, with date, segmented in a logical manner. I created the skeletal outline, first with a paper-based outline. My paper-first activity eliminated potential digital-world distractions. My outline:

  • Standard Articles
  • QuickNotes: (aside & link post formats)
  • Quotes (quote post format)
  • Photography (image post format)
  • Audio (audio post format)
  • Videos (video post format)
  • — ⇡︎ ⇡︎ blog ⇡︎ ⇡︎; — ⇣︎ ⇣︎ static pages ⇣︎ ⇣︎ —
  • Portfolio
  • About

♦️ The Mechanics

Satisfied with the paper-based framework, I duplicated it in the new SimpleNote file. I then went through the SimpleNote list, adding 3 blank lines after each section title. Reason: once I pinpointed a relevant coding example, I’d copy and paste it. Everything would be in place for code tweaking.
✅ Draft outline established within SimpleNote. Room provided for hammering out the coding per section.

4️⃣ Choose: categories vs tags for populating the SiteMap.

Understand: post formats live only in the Land of The Look, impervious to SiteMap coding concerns.

Consider how you’ve used categories vs tags to date. Whichever you favor suggests your choice for SiteMap creation purposes.

♦️ The Mechanics

✅ My choice: the display-posts="tag" code.

I’ll refer to tags throughout this tutorial. If you prefer categories, substitute that for my =tag references.

5️⃣ Distinguish among tags ready vs not-ready for the SiteMap chore. Tweak as required.

I had already applied audio, video, quote, and photography tags per relevant post. In other words:

  • Standard Articles
  • QuickNotes
  • ✓ Quotes
  • ✓ Photography
  • ✓ Audio
  • ✓ Videos

Four tags were ready for SiteMap coding inclusion. That left only the two uncheckmarked items for tweaking. Neither of those two sections included what I dub a master tag, that is, one tag guaranteed to pull all items relevant to the section.

♦️ The Mechanics

I created two new (master/umbrella) tags: ARTICLE (meaty posts) and QUICKNOTES (links and asides). The capitalized name provides a personal forever-reminder of the crucial, and exclusive, nature of these master tags.

I discovered the quickest way to revise / supplement tag assignments → the classic WP admin area: yoursite.com/wp-admin . Adding the new tags, per title, transpired within a single evening. I’m grateful for the Quick Edit feature.

I could have used the Bulk Edit feature. But I preferred to see current tag assignments during this particular step. If you’re using =categories, one look at the Bulk Edit screen and you’ll fall in love this feature.

✅ Sloppy tagging rectified with creation and application of needed new tags.

6️⃣ Study the coding options/parameters. Determine which SiteMap sections can use near-identical coding.

All blog-related SiteMap sections, except one (Photography), use the same coding:

[ display-posts tag="ARTICLE" posts_per_page="-1" include_date="true" display_content="false" display_tags="false" date_format=" D, n.j.y" ]

The only segment of the coding changing in most blog sub-sections = the word following, i.e. tag=xxxxx. THE CODE REQUIRES SURROUNDING  BRACKETS [ ] TO OPERATE. SPACING APPEARS HERE TO PREVENT SHORTCODE FUNCTIONING WITHIN THIS PAGE.

♦️ The Mechanics

✦︎ tag="ARTICLE"

I tagged each meaty blog post with the ARTICLE tag. Bonus: I’m now immune to theme-based post-format concerns.

Of course, the tag name changes per section:

  • tag=”QUICKNOTES”
  • tag=”quote”
  • tag=”VIDEO”
  • tag=”smooth-jazz” ← Audio
  • tag=”Photography”

Below, you’ll learn why the Photography SiteMap section merited special attention.

After completing the SiteMap, I discovered a few posted tunes withOUT the “smooth-jazz” tag. I’ll create a master MUSIC tag, substituting it for the “smooth-jazz” listed above. I’ll wait a week or so, ensuring fresh eyes can pick up other boo-boos as well.

✦︎ posts_per_page="-1"

The -1 calls all posts up to a maximum of 100, a system limitation. I titled the SiteMap quotes section “100 Recent Quotes,” alerting all to the limited nature of this specific listing. It also reminds me to continue looking for a work-around.

✦︎ include_date="true"

I wanted a trailing publication date. This code honors that desire.

✦︎ display_content="false"

Ensures titles, withOUT full content, populate the listing.

✦︎ display_tags="false"

I tried “true”. That yielded a cluttered appearance, coercing the switch to “false”. Hindsight: listing titles, within descriptive sections, renders additional tags unnecessary. I missed that fact the first go round.

✦︎ date_format=" D, n.j.y" ← e.g. Fri, 10.6.17

The translation of this date format coding, by character:

  • D: day name, in 3 characters
  • n: month, as a digit
  • j: date number
  • y: year, as 2 digits

WordPress provides a self-explanatory cheatsheet for configuring your preferred date format.

General rule: my blog posting nods to the schedule I devised:

  • Daily: Quotes
  • Monday: Audio
  • Tuesday: blogging holiday (miscellaneous post, if any)
  • Wednesday: Photography (99% = bird pics)
  • Thursday: Standard Article
  • Friday: Video (insightful)
  • Saturday: Link or Aside (both falling within my QUICKNOTES tag)
  • Sunday: mirrors Tuesday (i.e. blogging holiday)

Rationales:

  1. a steady diet of fresh content, but taxing my brain only for Thursday’s meaty article
  2. a nod to a few core joyful obsessions: music, photography, and inspirational videos
  3. I like to mix it up. Folks don’t always feel like reading, so I provide chillin’ alternatives.

Because I include the posting dates, the scheduling patterns become obvious.
✅ I pasted what I call the primary code into five of the six blog sub-sections of the SiteMap. I changed the precise tag word to reflect its section. Only the Photography tag/section required more— specifically, two additional parameters.

7️⃣ Tweak the coding for Lone Wolf SiteMap sections.

Recall: all blog section contents order by reverse chronological date. The Photography section does not.

✦︎ The Lone Exception: Photography (Birds / Nature) SiteMap Section

All but a handful of my image posts depict a bird. This includes local feathered friends as well as birds found around the world. Personal rule: I spotlight no bird on this site until I’ve confirmed an I.D., the name formally assigned to the bird. Reason: simple courtesy.

Birders, in particular, relish a bird I.D. Common curiosity also sparks the I.D. question. Those two facts sparked the decision dictating the how I present the bird title listing within the SiteMap.

♦️ The Mechanics

In all other blog post sections, ordering follows chronological publication date, most recent to oldest. For the Photography section, I instead chose ordering by name, that is, title. Note the last two new items within the Photography SiteMap section code: order= and orderby=.

[ display-posts tag="photography" posts_per_page="-1" include_date="true" display_content="false" display_tags="false" date_format=" D, n.j.y" order="ASC" orderby="title" ]

ASC = ascending order. Without that snippet, the alphabetical title listing starts at Z and ends with A. Ask me how I know. 😂

You can learn more about the syntax and available optional arguments/parameters at a focused WordPress.com support page.
✅ Every blog post section fleshed out with precise coding. Each section’s code added to SimpleNote. SimpleNote’s entire blog section copied → pasted under the Blog header of the writesquire-sitemap WordPress page. Visual check confirms success … and the need for further text-related tweaks (described later).

⭐️ Creating the writesquire SiteMap: The About Section

8️⃣ Study your static pages and decide presentation specifics.

I thought this would prove a quick task, given the one word [ sitemap ] shortcode. Ha! When I added it to my SiteMap page, weirdness greeted me.

Ummm, why the double HOME link?
Ummm, why the double HOME link?
Why both “writesquire” AND “home” appear flummoxes me. I suspect an inadvertent self-gift, back during the early days of my WordPress.com membership. Fixing it risks breaking a site that now works fine. No thank you! Time for a work-around.

Searching led me to another shortcode: list-pages.

I lost only one evening pulling together the Blog Posts SiteMap section, with ALL of it’s linked items. On the other hand, crickets chirped and dawn reappeared —several times— as I TRIED to wrap my brain around the list-pages coding.

♦️ The Mechanics

Reminder: when all else fails, walk away! In this instance, I chose to indulge Forest Therapy. Grabbing my ultra-zoom camera, I visited a local park with a far-as-the-eye-can-see lake. Thoroughly relaxed after that respite, I returned to the drawing board.

9️⃣ Select options for Customized About Pages SiteMap Section

✦︎ You can rely on the “page I.D.” for manipulation purposes…

Finding the page I.D.
Finding the page I.D.

✦︎ … Or other aspects of the page.

Confession: staring at the list-pages options, with the related explanations, still induced multiple reaches for my Excedrin Extra Strength bottle.

WordPress.com's list-pages options/parameters
WordPress.com’s list-pages options/parameters
Solution: I created this section manually, a mere 15 minute exercise, start to finish. That empowered me to add what I wanted where, free of hassle.

Rationale: The structure of the About pages precludes location changes. Any changes will target content, or perhaps the addition of another About-section page. Given the minimal maintenance, I choose to stick with my manual approach. It’s easy! It’s fast. It’s fuss free.

♦️ The Mechanics

I cheated, by

  1. entering the bare [ sitemap ] code into the writesquire-sitemap static page
  2. saving it as a draft
  3. tapping the Preview button
  4. tapping the Edit button
  5. going into the HTML editing screen
  6. copying the full raw-code listing under the About header
  7. deleting everything in this section of the static page except the About header
  8. pasting the data into my SimpleNote draft file
  9. rearranging the order of the
  10. ←→
  11. items as desired, via cut/paste
  12. copying only the data from the opening
      to closing

    tag in the SimpleNote file

  13. pasting it back into the writesquire-sitemap static page, under the About header
  14. saving as Draft
  15. tapping Preview
  16. performing a visual check
  17. confirming: done deal!

✅ About-pages presentation nuances finalized. No dates, tags, etc. Bonus: ducked figure out the coding headaches, now and in the future.

⭐️ Creating the writesquire SiteMap: The Portfolio Section

I can’t prove it, but I suspect this tale of woe flowed from my theme choice. Know: the next dilemma discussed probably can be solved with custom CSS. That assumes a Premium account, AND requires time to find, learn, implement, and massage/tweak the custom CSS coding. NOTHING is quicker/ easier than my seat-of-the-pants work-around. 😎

🔟 Determine the Best Way to Present Your Portfolio Section within the SiteMap

a/k/a how to handle a stubborn glitch

✦︎ The Grrrr

Last month I switched from the Sorbet theme to Rebalance, my desire to erect a portfolio fueling the switch. I chose Rebalance because of its portfolio presentation prowess, combined with its overall blog-posts friendliness. What I later discovered, courtesy of this SiteMap-creation project: a portfolio-oriented theme adds a plethora of portfolio-related shortcode options. Growl with me: Ugh!

♦️ The Mechanics (a/k/a The Fix / My Cheat)

While I was able to achieve my desired titles-only listing for blog posts and About pages, I bombed re the portfolio listing. Repeatedly! No matter which options I included within the coding, featured images assigned to portfolio pages muscled their way into my alleged titles-only SiteMap. Weary of fruitless searches, once again I conjured a cheat.

Result: The word Portfolio appears at the top of my SiteMap, linked to the portfolio archive. The URL itself auto-generates by the WordPress.com system: yoursite.com/portfolio/.

I added a right-pointing arrow1 to signal link-induced transport to another page, AND to visually distinguish this entry from the rest. This solution satisfies my overriding goal: easy access to every site item from the SiteMap listing. Bonus: the placement at the beginning of the SiteMap, plus the styling, suggests the special character of the Portfolio section. My way of disguising the truth: SherlockRenna blew it. GirlFriend has nooooo clue ’bout losing the blip-blop featured images! But she figured out a decent (transparent) work-around.
✅ Final section, Portfolio, added to SiteMap.

⭐️ Optional Additional Steps: Cleaning Up the Customized SiteMap

After creating the draft SiteMap and viewing it on the site, I noticed a few grrrr-inducers, all reflecting lack of uniformity concerns.

♦️ The Mechanics (a/k/a Clean-Up Patrol)

QuickNotes Section
Some titles began with the word QuickNote. Others did not. I manually added that designator to the title where required. The mechanics ate less than 20 minutes using the classic WP-Admin interface’s Quick Edit feature.

Audio Section
Some titles reflected only the artist’s name; some, the title; others, both. I revised each, implementing a consistent Audio: song title – artist title style. Time: under an hour, start to finish. Quick Edit again precluded intense grief.

Video Section
Not all began with the desired Video designator. Tweaked.
✅ Each of the above sections massages for uniform presentation.

Photography
The bird I.D. name accompanied every post at the time of publication. But I sometimes substituted a cute description as the title (e.g. Lovers’ Quarrel), squirreling the I.D. in the body of the post.
✅ Tweaked to provide bird I.D. within the title itself, always. Previous title’s descriptive title remains, trailing the bird’s formal name (e.g. Lesser Javan Whistling Duck – Lovers’ Quarrel).

✦︎ FYI

WordPress caches pages and posts. If, after making revisions, the SiteMap fails to reflect your changes, take a break. An hour or so later, the changes made WILL be visible. If not, clear your browser cache, shut down your browser, then reopen and revisit your SiteMap for inspection.

Call to Action

Some folks make it dang near impossible to find articles of interest. The SiteMap addresses that issue head-on. This explains why a direct link to the SiteMap appears on every blog post and static page, in the site-header section.Because first impressions cast a looming shadow, I tailored then tweaked the SiteMap.

Your dream awaits!
But you need to take action to convert it into tangible reality! A freelancing-success goal sparked my make-a-portfolio project which, in turn, led me to torment, a/k/a coding land. While working on the portfolio, I realized the wisdom of a SiteMap. Given all the coding involved, I acknowledged —but refused to bow to— fear. Read: I had no clue; recognized my ignorance; and, resolved to cure it. ‘Tis true, folks: no pain, no gain.

Hey, if I managed to pull this off without blowing up the net, or killing the entirety of this site, so too will you! My singular nod to fear: performing most of the live-on-the-site work during wee hours, dwindling the audience during my no-clue moments. 😎

Footnotes

  1. iOS Character Pad app. Frequently used symbols are assigned a shortcut:Settings → General → Keyboard → Text Replacement.

3 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s