Posted on

How I’m replacing Instagram with WordPress

I set forth a challenge to remove Facebook and its properties from my online presence and this includes Instagram.

Here I’m using the official WordPress App from Automattic and Snapseed by Google along with the Twenty Sixteen theme on my website to get the job done. What follows is a step back step gallery with screenshots. Yes, its more steps than Instagram but all the features are there.

Open the WordPress app
First, I open the WordPress app and click the circular button at the bottom right to create a new post.

upload the photos from my phone
Next, I upload the photos from my phone.

That’s basically it. However, if I’m willing to put in the additional effort. I’ll open up Snapseed to edit the image before uploading. This allows me to use automatic image editing filters and reduce the file size if I want to conserve my data during the upload process.

A photo I took at the Petersen Automotive Museum recently
A photo I took at the Petersen Automotive Museum recently

I open the image in Snapseed and prepare a smaller standard HD copy for export and upload.
I open the image in Snapseed I open the image in Snapseed and prepare a smaller standard HD copy for export and upload.

Additional image filters in Snapseed
I’d be negligent if I didn’t mention the Instagram like filters available in Snapseed

Back on the WordPress app there are additional settings found by tapping the gear icon. Here, I set the featured image, Geo location, as well as organize the post with categories, tags and custom post types.

Post Types
The Twenty Sixteen theme offers additional post types to further organize your post by type.

Geo tagging the post
Use your phones location to Geo tag the post

Confirm the location
Confirm the location.

Review details of your post
Review every detail of what you’re sharing.

File details screen
Set a display size, caption, alt text and even link the image.

That’s a lot of steps. However I can choose every detail or skip anything I don’t need for that particular post. This allows me to share as little detail or as much as I’d like.

The important point to take away is that there are options beyond closed social media platforms to share photos. Sure, I use Snapseed here to make adjustments but I can easily leave that out.

Posted on

Researching Conditional Tags

Old Corona Tavern Child Theme screenshot

I’m taking a deep dive into WordPress’ Conditional Tags feature this month to get a better understanding of how it can minimize custom written code while providing practical features.

This personal study project will do the following.

  1. Create a fictional small business
  2. Anticipate its needs in a website
  3. Use Twenty Seventeen as the Parent Theme
  4. Add some practical custom features
  5. Most importantly, create a minimal amount of new code.

The Business

A small restaurant trying to up it’s social media and web presence. This business would have relied solely on social media and a basic informational  website in the past.

Their Needs for an Improved Website

The owner wants to generate more interest in the community. They have time to write and photograph a few times a week and drop in on social media. Meanwhile, staff have been concerned that answering phone calls, and social media posts from people asking for basic information cuts into their time with customers. With a little planning everyone thinks that their website could help with some new features.

  1. A Currently on Tap  and Dining Menu that can be easily maintained.
  2. A listing of entertainment and specials.
  3. A simple blog that supports the business within the community.

Twenty Seventeen as a Theme

Twenty Seventeen is almost perfect but the owner still needs a few practical features to humanize the business and inform the community.

  1. Author profiles for the blogging staff
  2. Practical suggestions like food parings
  3. Maintain an archive of current and past offerings; items move in and out of availability almost daily so the manager will be tasked with updating the website as needed.

Conditional Tags

With a single well planned bit of code the Author profiles can be added to each post, page and author’s archive along with their portrait.

A second bit of code will also be added to posts about beer suggesting the reader view what’s Currently on Tap. It will also check if the beer they’re reading about is currently available.

A third block of code will create beer parings for current menu items; If possible the owner would also like parings for currently unavailable items

The Process

  • Each menu item, beer and event will be a post
  • Categories can then be used to control availability and placement of items
  • Tags will be used to create pairings
  • All content updates must be possible through the dashboard by an Editor
  • No plugins
Posted on

A tale of WordPress conflicts

WordPress logo with flames

Unrelated Themes and Plugins can sometimes conflict with each other, having a debugging workflow in place is always a good idea.

Yesterday I discovered a broken element on my Events Calendar and jumped into the browser console to investigate.

console error
At first glance I assumed the error is was within my Modern Tribe Events Calendar plugin.

JavaScript like PHP is tricky to debug, an error could read g.tribe_has_attr is not a function but be caused by something else on the page.

After creating a full site backup I duplicated it in a staging environment to safely hack away.

My WordPress debugging workflow

  1. Check if this error appears on other pages, in this case it didn’t.
  2. Disable current theme and activate a default theme like TwentySixteen.
  3. Reload page to see if error persists.

The error disappeared which led me to suspect the actual flaw was in my theme’s code and not Modern Tribe’s Events Calendar.

My next step to uncover the cause took me to functions.php as it contains all the enqueued JavaScript for my custom theme. I commented out all the enqueues and almost magically the error disappeared from the page. Activating them one at a time I uncovered where the error originated.

functions.php enqueue screenshot with jQuery commented out
After commenting out my theme’s jQuery requirement the error disappeared.

My theme is based on a responsive framework and includes a jQuery dependency for many of the interactive elements. A minified jQuery library for Foundation 6 was the culprit. Without it slideshow carousels, galleries, accordions and other features would not work.

A minified jQuery library for Foundation 6 was the culprit.

It’s probable that I made a mistake in how this jQuery was implemented in the theme. Ideally I’d audit the code but that wasn’t really an option. The next best solution is to remove this jQuery from the pages where it became a problem. At first I was going to dequeue it in my child theme where Events Calendar is used. However, creating a simple plugin that I could activate and deactivate seemed like a more elegant solution.

Remove Foundation jQuery plugin
Dequeuing jQuery where it became a problem isn’t ideal but it’s a good fix.

Theme jQuery vs. Plugin jQuery?

I didn’t take the time to audit the precise conflict and determine whether it’s caused by my theme’s jQuery library butting heads with The Events Calendar’s version but having multiple enqueued versions sounds like a path towards disaster.

My to-do list minimize script conflicts in the future

  • Read and understand how jQuery is and should be properly enqueued for Themes and Plugins
  • Create a Plugin for each of the Theme’s interactive elements so they are self-contained blocks

I’m not certain independent plugins would lead to a better workflow. Photo galleries, content accordions, image carousels could all be maintained separately and activated as needed. But this could lead to a longer set up process for creating a new site. Then again, on child themes that don’t need all these features it would lead to a leaner code base.

Please leave a comment below if you have any suggestions on dealing with Theme and Plugin conflicts.