WORDPRESS


Web Development

Updated Jul 11th, 2023

Overall Rant on WordPress

Every time I enter the web design/development world I get stuck in the WordPress ecosystem. The content management system, extensibility with plugins, just keeps me from branching outward to other ecosystems. I really like the menu’s, forms, permalinks, dynamic content, and more. I can bootstrap components to work on pages and posts/javascript/cssgrid. If I built a client a site and they wanted to make changes on their own they need an easily accessible back-end to make simple edits with a developer. With that being said with customer posts, field and panels and different user permissions I can really make it simple for them. I just want build something in HTML/CSS/Vanilla JS to prove to myself I can create value outside of WordPress. Rant over.

The WordPress App

Running a WordPress website you need a way to update content easily on the go. Enter the WordPress app. This feature alone is one of the reasons I continue to recommend WordPress to those that need a simple website. A few years back this app was painful and I’m grateful it has been brought up to speed. These days it does everything you would expect it to do. A big feature for me was to be able to easily switch from one website back-end to another, since I manage the content of multiple sites. The app just works. A huge credit to WP.

Security

Because WordPress is king CMS is is a target for malicious users. Read this article here.

Backups and Migration

It’s crucial to be able to backup WordPress sites very quickly and a website owner needs to be confident that re-installs can happen quickly. As a developer it’s also important to be able to migrate a site down from a live server to a local hosting environment, make changes, and deploy changes back to the live server. 

I use Local by FlyWheel for local hosting environment. I previously used bitnami for my local hosting environment.

There is a WP plugin that can clean up the WP database and you strip down post revisions and unneeded junk.

I dread maintenance tasks. Hello recent update to WordPress, thanks for pushing  “website backup” way up my To-Do List. Thinking about skipping a backup before updating? Don’t risk it.

Use a Plugins for Simple Backups: All-In-One WP Migration is current Choice. You may need to install the extension to get the import limits back up to the free 512 MB.

The control freak in me wants to have control of the digital asset and file it the same as you would some old family pictures. This is a little more of a detailed process. It involves two portions of backup:

  1. The Actual WordPress Installed Files including Uploaded Assets
  2. The stuff that has been uploaded to the database, i.e., post and page content

Backing up the WordPress Installed Files is easy. Simply download the files from your web server.

The database portion is a little more in depth. You have to go into Php Myadmin (which has its own login you oftentimes forget) and export a backup of the database. The export has a few features that you can change and it is important that you are using the correct settings so if need be you can later import that data back into the database and have it actually work. As a test I like to install a fake database on my webserver and upload the exported database file to make sure it was exported with the appropriate settings. Once you have the correct settings you can store them in a safe place to refer to on your next backup.

Depending on your storage capacities you may want to zip up the backup folder to save space. You may also choose to delete an earlier backup instance once you have a more recent one or keep “n” number of most recent backups. Again this is more about preference and capacity.

Exclude Node Modules for All In One WP Migration Backup

//functions.php

//excludes node_modules folder from ai1wpm (plugin) exports
add_filter('ai1wm_exclude_content_from_export', 'ignoreCertainFiles');

function ignoreCertainFiles($exclude_filters) {
$exclude_filters[] = 'themes/yourthemedirectorynamehere/node_modules';
return $exclude_filters;
}

Custom CSS for Login Screen

// functions.php
//Add Custom CSS to the login page
add_action('login_enqueue_scripts', 'ourLoginCSS');
function ourLoginCSS() {
    wp_enqueue_style('custom-google-fonts', 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap');
    wp_enqueue_style('our-main-styles', get_theme_file_uri('/bundled-assets/styles.e2b7dc068c4ec4a09246.css'));
}

Automatic Backups

Automatic Major and Minor Upgrades

Hooks: Actions and Filters

Notes From Carrie Dils in Lynda Course Genesis and WordPress: Customizing themes

Hooks include actions and filters:

There are add actions and remove actions:

Add Action: instruction on where to add a function or a bit of code

Remove Action: instruction on where to remove a function or bit of code

1.) Adding or removing action

2.) Name or location of the hook If this doesn’t exist nothing bad happens

3.) Callback function must exist or you’ll get a nasty error. Already exists in genesis, wordpress, or write your own.

4.) Priority: Order in which code is executed; 10 is default priority in wordpress so if no priority is specified wordpress will see it as a 10. 5 is executed before 10 and 10 is executed before 15. If two have the same priority then the default is which comes first in the code.

plugin: genesis visual hook guide: you can see on your own site.

In order for a remove action to work there has to be a corresponding add action with the exact same hook, function, priority, and arguments. The reason is logical. You can’t remove something that isn’t there.

See Also:

https://codex.wordpress.org/Conditional_Tags

Blog Posts Titles Only

Create a template and remove everything but the title:

I created a php file called page_blog and added it to the theme folder. under page attributes while editing a page I selected the template blog.

Instead of removing the content site-wide and adding it back conditionally I think it’s probably better to remove conditionally. There aren’t many resources for removing content conditionally but there are resources for removing titles (see here).

Child Themes

Checkout my post for Child Themes here.

Password Protection

I would like to explore password protection in WordPress for ECP site

Gather links on the best way to do it here: WPbeginner | ThemeIsle

Image Scaling

Size of the images is crucial and can really bog down site speed. Users can upload humongous image files and without “optimization on upload” will bloat your uploads folder and website and crush page load speed. I took a site from 18.8 page load speed to 5.2 seconds just by optimizing images and taking one page from 35mb to 5mb with a few clicks of a plugin. Smush is the plugin I have been using but be careful because, like all plugins, it can break things, (like an image gallery for instance).

Crop in Media Library

Settings: Media Screen

Image editors like Photoshop | GIMP | Figma | Canva

72 ppi is the web standard

Starter Themes

WP Bootstrap Starter is compatible with Elementor

Note: Set WP_Debug to true in the config file to get php errors in orange.

RestAPI

I watched a tutorial by Traversy Media on the WordPress API and React and it uses JWT Rest API plugin for authorization where JWT stands for JSON web tokens. He also uses Postman as an API client. During the video they build a quick React App using fetch to grab the API data.

One of the early things to understand was instead of /WP-admin you just go to /wp-json

/wp-json/v2/posts returns an array of objects

Editing data requires authentication using JSON web tokens. Tutorial author used a plugin for custom post types called custom post types UI. He also used a plugin for custom fields called advanced Custom Fields. Next.js provides server-side rendering.

Wpcasts on Headless WP

The author says that the good reason to stick with traditional WordPress (and not bother with headless API) is because of plugins, themes, short codes, the wysiwyg page builder, experiences like Divi and elementor work out of the box.

Some pros to going headless include that your data is separate from your front end so you can create lightning fast websites statically generated (maybe use Gatsby or Next) but some of the cons to this include: it’s not really portable like you can’t hand this off to like your client or their new developer or at least it’s be much more difficult so they’re not going to be able to now go and like install plugins or they’re going to have to figure out how to npm run builds.

This means that some of the stacks that I would look at are WordPress straight up, vanilla JavaScript, react, Gatsby, and headless WordPress plus React.

Freelancing in WordPress by WP casts

This is a pretty good watch on YouTube talking about the pros and cons of freelancing and WordPress The pros are that’s a good fit for most projects e-commerce brochures dealerships real estate You know you can really build something at a rapid pace so there’s usually pre-existing themes online there’s plugins you know user or authentication functionality is kind of right out of the box another good one is that it’s easy to find help.

Only load JS into certain WP pages by WP learning lab

And it was possible but quick and dirty video on the process.

Random

Before you get too far set up your media folder appropriately. I don’t like month and year organization.

What is composer and NPM and how does it relate to migrating WordPress?

Don’t waste everything I’ve learned on WordPress. It’s so darn simple when it comes to quickly solving complex problems: Templating Engines, User Registration and Auth, Security, Error handling, client content creation, etc.


WordPress is built on PHP; learn it. It’s still a relevant stack.


When building Website for the clients WordPress is just so darn simple as a back end for them to log in create content

This is fairly discouraging for advanced web developers who want to get away from WordPress. Decouple client backend with frontend.

Wes Bos moved away from WordPress because he wanted all of his posts to be in markdown.


advantages are number one PHP top to bottom

advantage number two are you is your maintaining one thing (your theme) so not including custom plugins You have one repository probably use composer and NPM and you’re good to go

advantage number 3 is plugins there’s an insane amount of free plugins and a super powerful group of premium plugins some of the favorites are yoast SEO, custom post types UI, advanced custom fields pro, query monitor, smush (or EWWW or Shortpixel), WP rocket. some honorable mentions include WooCommerce gravity forms regenerate thumbnails, etc

advantage number four is themes… sometimes I guess it’s good for non-techies but mostly a hassle for developers especially starter themes

advantage number five is instant publishing And you can have a wysiwyg experience, You can use elementor or another page builder.

advantage number six is performance if done right. WordPress gets a bad rap for performance it’s not always true. of the rest API can be slow

advantage number seven is to spin sites up quickly

advantage number eight is that it’s easy for clients and for dev’s

disadvantage number one is that PHP templating is good but not great

disadvantage number two plugins are amazing until they aren’t

disadvantage number three is that performance needs attention

disadvantage number four is that the backend and furniture tightly coupled meeting this makes redesigns and updates harder

disadvantage number 5 is that PHP is cheap but not free Time to first bite can be a killer and hosting can become expensive as you need more and more power

going headless you can use WPGraphQL (recommended by author) or the rest API

advantage number one is that you have the freedom to use whatever front end you want

advantage number two is that you can publish the same content to any platform

advantage number three is to potentially share code between platforms

advantage number four is to pivot at any point

well the disadvantages to going headless?

well number one disadvantages the front end and back end are two different technologies

disadvantage number two is that you are hosting your code in different places

disadvantage number three is that there’s no instant feedback

disadvantaged number four is limited plugin selection

disadvantage number five it is that there’s more upfront work someone has to create the API

disadvantaged number six that I can simply be overkill