Categories
PHP

Connect to a WordPress Lightsail Database from a GUI

2

Earlier this summer I learned about AWS Lightsail. I was looking for an easy way to spin up multiple WordPress websites for a plugin I’m working on and Lightsail was exactly the kind of tool I wanted.

I got the WordPress sites up and running, but I ran into an issue.

How do I connect to the Lightsail database from the GUI I use on my Mac?

In this post, I’ll show you how to connect to the database from TablePlus and MySQL Workbench. This will also work for any database GUI that supports SSH connections.

Connect over SSH

The database you’re trying to connect to is running as a local process on your Lightsail instance. There’s no external database IP you can directly connect to from your local machine.

Instead, you’ll need to connect to the database over SSH. So your GUI will SSH into the Lightsail instance and then connect to the local database process. TablePlus, MySQL Workbench, and many others support database connections over SSH. All you need to do is gather a few extra connection details when configuring the GUI connection.

SSH connection info

There are 4 pieces of info needed for the SSH connection. One is the port, and I’ll give that to you know. The SSH port you want to connect on is 22.

You’ll also need the host, username, and private key file. You can find all 3 of those on the “Connect” tab for your Lightsail instance in the AWS console. Checkout the screenshot below. Going off the screenshot, the host would be 54.172.123.217, the username would be bitnami and the private key file can be downloaded by clicking “Download default key”.

Database connection info

Next, you need to grab the database connection info. The host is 127.0.0.1. The database port is 3306. The database name is bitnami_wordpress. The username is root. The only piece of info you need to track down is the password.

The password is your bitnami application password. You might already know your password as it’s also your default WordPress login password.

You can get the password by first SSHing into your instance.

From there, run cat bitnami_application_password to get the password. You’ll need that when you setup the connection in the next steps.

Connect using TablePlus

You now have all the information you need to connect to the database. I’ll cover TablePlus first and then go through the same process with MySQL Workbench.

Create a new connection and you’ll see the following:

From there, click “Over SSH” at the bottom-left as we want to connect to our database over an SSH connection. Fill out the connection details and you’re done!

Connect using MySQL Workbench

The process is similar for MySQL Workbench. When creating a new connection, make sure to change the “Connect Method” to “Standard TCP/IP over SSH” and then enter your SSH and database details.

2
Categories
PHP

WordPress Post Syntax Highlighting with Highlight.js and Prism

4

There are plenty of WordPress plugins for syntax highlighting, but the ones I tried (and I tried many) tried to integrate into the editor, letting you edit code with syntax highlighting enabled.

This isn’t what I wanted.

I wanted a syntax highlighter to highlight the code blocks in my blog posts as visitors were reading them.

While I couldn’t find any WordPress plugin that would do this for me, I knew of JavaScript libraries that could get this done such like highlight.js and prism, so I used these to build what I wanted.

Which one did I go with? Both.

Why use both?

Highlight.js and Prism both have their advantages.

Highlight.js has an awesome language auto-detection feature that can accurately detect the language used in a give code block. In then adds a language-xxx class to the code block to identify it, such as language-php.

Prisma, on the other hand, has cleaner looking themes and rich set of plugins for things like line numbers and copying code to the clipboard. It doesn’t support auto-detection though, and I don’t want to manually edit my posts to add the necessary metadata.

I needed the auto-detection from Highlight.js with the themes and plugins from Prism, so I used both.

Give me the code

Here it is.

I first load and run highlight.js to add the necessary language classes to my code blocks. Then I load Prism and the Prism CSS to highlight the code.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

<script>
	document.addEventListener("DOMContentLoaded", function () {
		hljs.highlightAll()
	})
</script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4
Categories
PHP

Add a Link to Your Plugin from the WordPress Plugin List

2

There’s nothing more annoying than installing a new WordPress plugin and having to dig around the WordPress admin menu to figure out where the plugin lives. Is it a new top level page? No. In the settings menu? No chance. Then where?

You can improve the onboarding experience for new plugin users by including a link to your plugins dashboard or settings page right inside the plugin list. As an example, the screenshot below shows the “Analytics Dashboard” link I added for Independent Analytics.

Adding a link requires you to use the plugin_action_links filter. You’ll need to call add_filter with two arguments. The first argument is the filter name, and the second argument is a callback function to run.

The filter name should start with plugin_action_link followed by the path to your plugin file. This includes your plugins folder name as well as your plugins main file name (the one with the header comment).

For Independent Analytics that would be independent-analtyics/iawp.php.

add_filter('plugin_action_links_independent-analytics/iawp.php', 'add_plugin_action_link');

The callback function gets called with a single argument, an array of the current links. The callbacks job is to add new links to the array and then return the modified array. You can add links to the beginning of the array to have them show up first or onto the end of the array to have them show up last.

function add_plugin_action_link($links)
{
    // Build the URL
    $url = add_query_arg('page', 'independent-analytics', admin_url('admin.php'));

    // Create the link
    $settings_link = '<a class="calendar-link" href="' . esc_url($url) . '">' . esc_html__('Analytics Dashboard', 'iawp') . '</a>';

    // Link first: Having the link show up as the first link
    array_unshift($links, $settings_link);

    // Link last: Having the link show up as the last link
    // array_unshift($links, $settings_link);

    // Return the modified $links array
    return $links;
}

That’s all there is to it. You can add as many links as you like, though one or two should be more than enough.

2