I've written a few advanced posts about WordPress; you can find them at: joshuatz.com/tag/wordpress/

Misc / How Do I...

• Get the post's hero image / thumbnail

  • Echo out HTML: the_post_thumbnail()

    • You can pass CSS classes (space separated) to the function, like so: the_post_thumbnail('medium',array('class'=>'featuredImage responsive-img'));
    • ⚠ Warning: the HTML that WP generates includes fixed pixel dimensions (e.i. non-responsive)
  • Get raw URL string: get_the_post_thumbnail()

The Loop and Queries

Using Post Data Outside the Loop

When trying to use posts outside the main loop, you have two standard options:

• The safest is usually to avoid using any template methods that rely on the global $post variable, and instead use the alternative versions of the methods that allow passing in a specific post to get the data for.

  • For example, instead of using the_permalink(), use get_permalink($post)
  • Most template methods have a variant that allows passing in a specific post by argument (usually prefixed by get_ instead of the_)
  • If you have a post object, you can also usually manually retrieve a lot of data yourself

• The alternative method, which is slightly less safe, is to manually set the global $post variable to the post you want to use, and then cleanup once you are done:

  // Assuming we have our *own* post object, outside loop
  $myPost = $myPosts[0];
  
  // You need to manually alter the global variable
  global $post;
  $post = $myPost;
  
  // You also need to call a special setup function
  setup_postdata($post);
  
  // After you are done, make sure to *reset* data
  wp_reset_postdata();

Loading Fake Sample Data

If you need to load a bunch of data into WordPress to test your theme / plugin / etc, you have a bunch of options:

• XML Files

  • WordPress allows you to posts and content through XML files
  • You could either generate these files yourself, or download pre-built test XML files (example: Codex, motopres)
  • For an official page and test data set, see Codex: Theme Unit Test

• SQL Insertion Scripts

  • If you are comfortable with SQL / databases, you could easily prepare a SQL insertion file, that when ran, inserts all the sample data directly into the database
  • This could be stored as a prepared insert statement, an exported CSV, or even JSON, that you use something like node to import with a little scripting
  • Pro: Runs faster than XML import, more flexibility in scripting, highly portable
  • Cons: Requires database info, SQL familiarity, etc.

• Dummy Content Plugins

  • There are multiple WordPress plugins already out there that will insert a bunch of dummy data into your site when installed.
  • One of the more popular ones seems to be FakerPress

• WordPress APIs

  • You could use your favorite programming languages of choice to script requests to the Wordpress REST API, and use it to create posts, add content, etc.

🚨 Warning: No matter which import method you choose, be careful running or importing files you find on the internet.

---

Child Themes

Key thing to remember ([per docs])(https://developer.wordpress.org/themes/advanced-topics/child-themes/#adding-template-files):

Other than the functions.php file (as noted above), any file you add to your child theme will overwrite the same file in the parent theme.

Optimizing Performance

There are a lot of "low-hanging fruit" tasks that can be tackled when optimizing a WordPress installation; some are specific to WordPress, while others are true for most websites.

🔗 web.dev/fast is a good general resource for learning more about web performance.

WordPress Specific:

• Check for duplicate, unnecessary, or generally un-optimized queries

  • You can use the Query Monitor plugin for this

• Take advantage of server-side caching

  • LiteSpeed Cache is a popular and durable plugin / system
  • Make sure to actually stress-test the system after setting up; check for hit vs miss headers, etc.

• Optimize images on upload, or use a CDN that can do so

  • Creating multiple sized versions and/or compressing

• Keep an eye on TTFB

  • With dynamic websites, it is a little too easy to get carried away with dynamic content generation, plugins, and themes. Make sure to use caching whenever possible, and keep an eye on TTFB.
  • In general, the less plugins the better

General:

• Make sure to enable client-side caching
• Minify assets / code when it makes sense
• Don't block rendering with giant JavaScript blocks
• Be careful about font optimization
• Take advantage of how much better performance dev tools have gotten!