Building my WordPress Website – Plugin, Widget, and Shortcode

Today I found the cutest little plugin, a little version of the Chrome “internet unavailable” dinosaur game.

First, I found the plugin on the WordPress.org website and installed it. I then used the shortcode to add an instance of the game to my homepage. This shortcode can be added to posts and pages as text blocks. The game will then show up as part of the post in the preview and once it’s published.

My first attempt at using shortcode as a widget

I experimented with adding the shortcode as a widget to the footer, which would have added the game to the bottom of every page on my website. In order to do that, I went to Appearance>Widgets, then added a new “code” block in the desired footer section. I then clicked the options button and clicked “edit as HTML.” I then deleted the code that was automatically generated there and pasted in the shortcode.

When I clicked out of the new block, it gave the error “This block contains unexpected or invalid content.” However, when I updated the page anyway and refreshed my website in another tab, the code still worked. When I clicked the “resolve” button, it had me convert the block to an HTML block, which removed the error. The shortcode was also now surrounded by the html paragraph tags. The preview button in the widget block did not show the game itself, but the game still worked on the live website.

Long story short…

I found it was easier to just start with an HTML block when using shortcode on the widgets page. I didn’t need to add the paragraph tags in order to get it to work with this method.

This was a fun experiment with widgets and my first exposure to shortcode. Although I was able to make the code work as a footer widget, I decided to keep the game on my homepage to minimize distraction on my other pages.

Comment below if you ended up adding this fun little plugin to your website!