DEV Community: Simon Lee

What is a WordPress Nonce? And how to use it.

Simon Lee — Wed, 29 Nov 2023 23:26:00 +0000

A nonce by definition is something that is used only once and without recurrence. In a WordPress website, nonces are used to validate the contents of a form and avoid malicious activity. More specifically, a nonce protects your website from Cross-Site Request Forgeries (CSRFs) attacks.

source: this blog article

How to use a nonce in WordPress

In functions.php, in your function that loads scripts and css files, you can create a nonce property inside a WordPress function called wp_localize_script(). See example below:

wp_localize_script('my-website-files', 'someSiteData', array(
  'nonce' => wp_create_nonce('wp_rest')
));

If you view your web page source, you can find a key-value that looks similar to: var someSiteData = {"nonce": "15e935b62e"}

You can use that generated hash as a property in an AJAX request, as shown below:

// jQuery
$.ajax({
  beforeSend: (xhr) => {
    xhr.setRequestHeader('X-WP-Nonce', someSiteData.nonce);
  }
})

WordPress function get_template_part()

Simon Lee — Sat, 18 Nov 2023 15:38:13 +0000

When building custom WordPress themes or websites, one important function you'll almost certainly use is get_template_part(). Let's explore and investigate this function.

The primary reason why this function is so useful is the DRY principle (Don't Repeat Yourself). It helps you write cleaner code, eliminating code duplication.

Typically, you will put your template files inside a directory called "template-parts". So if you have a file there called "event.php", here's how you would use that file in, for example, front-page.php.

get_template_part() takes in 2 arguments. (The 2nd argument is optional).

get_template_part('template-parts/event');

If you want to create and reuse even more modular, smaller-sized components throughout your website, but limit the scope to just "events", you can use multiple files that begin with "event-" in the file name. For example, "event-header.php" and "event-footer.php". To use those template files, you would need to use the 2nd argument in get_template_part(). For example:

get_template_part('template-parts/event', 'header');
get_template_part('template-parts/event', 'footer');

Conclusion

If you want to keep your WordPress code DRY, build reusable components with component-driven design patterns, you'll want to use get_template_parts() to make those abstractions.

Custom WP Thumbnail Sizes

Simon Lee — Fri, 17 Nov 2023 15:27:12 +0000

By default, WordPress creates 5 image files when you upload a featured image (the original plus 4 smaller versions). Adding a custom-sized image for featured images is possible by using the add_image_size() function inside your functions.php file.

As an example, let's say you want a 200 x 200 image with the nickname of "my_avatar".

function my_site_features() {
  add_image_size('my_avatar', 200 , 200, true);
}

As you can see, the add_image_size() function accepts 4 arguments: the name, width, height, and a boolean value for whether or not you want to crop the image (true=crop, false=no crop).

Quick side note

To retroactively regenerate "my_avatar"-sized thumbnails for all your existing image uploads, one good option is to use the Regenerate Thumbnails plugin.

As an alternative, you can use Jetpack's Photon Module.

Displaying the "my_avatar"-sized image on a web page

Let's say you want to display that "my_avatar" custom-sized image in your single-event.php template file. All you have to do is add "my_avatar" as an argument for the_post_thumbnail(). For example:

the_post_thumbnail("my_avatar");

Turning On Thumbnail Support for Custom Post Types

Simon Lee — Mon, 13 Nov 2023 20:42:17 +0000

If you read through the functions.php file in any theme, you'll see a few lines of code that look like this:

add_theme_support('post-thumbnails');

These features are for WordPress's 2 default types: Posts and Pages. If you are working with custom post types, you'll have to add this line of code to your (for example) my-custom-post-types.php file located in your mu-plugins folder. You'll add thumbnail support inside the register_post_type() function, as shown below:

function my_custom_post_types() {
  register_post_type('event', array(
    'supports' => array('title', 'editor', 'thumbnail'),
  ));
}

Now, when your content editors are looking at the custom post, for example, "Event", they will see the "Featured image" option in the WP Editor (lower-right hand side).

Updating WP Permalinks

Simon Lee — Thu, 09 Nov 2023 17:11:56 +0000

After registering a new custom post type, the first thing you will probably do is add a couple dummy posts to test it out and make sure things are working as expected. You then visit the page after creating a dummy post, and notice that none of the content is displayed, and the title of your tab says "Page Not Found".

How to fix

In order for WordPress to recognize your new post's url, you have to regenerate your website's permalinks, which is very easy to do.

In the WP Admin sidebar, point to Settings, click on Permalinks, and then click the Save Changes button. This will regenerate the permalinks, and now, if you go visit your page, the content should appear.

WP Custom Post Types

Simon Lee — Mon, 06 Nov 2023 04:39:36 +0000

While non-coders typically create custom post types in WordPress with a popular plugin called "Custom post types", developers who want to write the code to give your users the ability to create custom post types can use this quick guide to get started.

You could create an action in your functions.php file, but if your content writers, editors were to switch the theme, then that custom post type would no longer be available in the WP Admin. Similarly, you could create a small plugin, but that could also be deactivated by mistake by editors in the WP Admin.

Best practice would be to register your custom post types in a folder called "mu-plugins", which live in their own dedicated folder, and are automatically activated. If you switch themes, your custom post types are still available. Also, they cannot be deactivated from the WP Admin.

Step 1 Register Custom Post Types

Create a folder called "mu-plugins". It should sit alongside your project's "plugins", "themes", "upgrade", etc directories. Then add a new file called (e.g.) "my-custom-post-types.php". Copy & paste the following code to that file.

<?php

function my_custom_post_types() {
  register_post_type('event', array(
    'public' => true,
    'rewrite' => array('slug' => 'events'),
    'has_archive' => true,
    'show_in_rest' => true, # switches from Classic Editor to Block Editor
    'labels' => array(
      'name' => 'Events',
      'add_new_item' => 'Add New Event',
      'edit_item' => 'Edit Event',
      'all_items' => 'All Events',
      'singular_name' => 'Event'
    ),
    'menu_icon' => 'dashicons-hammer'
  ));
}
add_action('init', 'my_custom_post_types');

Visit the WordPress docs to see a list of all the parameters that can be used with register_post_type().

Step 2 Displaying Custom Post Types

You'll have to create a custom query to display custom post types in (for example) front-page.php.

<?php
$latestEvents = new WP_Query(array(
  'posts_per_page' => 2,
  'post_type' => 'event'
));

while($latestEvents -> have_posts()) {
  $latestEvents->the_post(); ?>

  <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <div><?php the_content(); ?></div>

<?php } wp_reset_postdata();

Useful Bulma CSS Tip

Simon Lee — Mon, 07 Sep 2020 07:01:15 +0000

I've been a big fan of Bulma ever since I first discovered it a few years ago. Bulma is a free, open source CSS framework based on Flexbox, created by Jeremy Thomas.

I love simplicity

I love the fact that Bulma is purely CSS and no javascript. Here's a nice comparison with Bootstrap. The class names and modifiers are all easy to remember and intuitive. (After using it a few times, you'll pick up the naming schemes for the modifiers quickly, and you'll refer to the docs less and less frequently). It is also very easy to customize or overwrite (without the need for !important).

Tip

Here's a simple table using Bulma's table class:

<table class="table is-fullwidth">
    <tr>
      <td>Hall of Fame</td>
    </tr>
    <tr>
      <td>Michael Jordan</td>
    </tr>
    <tr>
      <td>Magic Johnson</td>
    </tr>
    <tr>
      <td>Larry Bird</td>
    </tr>
    <tr>
      <td>Shaq</td>
    </tr>
  </tbody>
</table>

Like most people, I don't enjoy writing HTML tables. It's a lot of markup.

But if you use Bulma's .panel-block class, you can achieve the same table-like look with far less markup.

<p class="panel-block">Hall of Fame</p>
<p class="panel-block">Michael Jordan</p>
<p class="panel-block">Magic Johnson</p>
<p class="panel-block">Larry Bird</p>
<p class="panel-block">Shaq</p>

Here's the result. (Slightly bigger padding-top and padding-bottom makes it a bit more readable as well.)

Thanks for reading. More Bulma "hacks" and tips to come...

Comparing React and Vue - part 2

Simon Lee — Thu, 30 Jul 2020 11:55:00 +0000

This is my 2nd post for my React & VueJS comparisons... purely for learning and understanding the basics of these 2 frameworks a little better. Here's Part 1.

Let's look at basic conditional statements in Vue

<p v-if="show">conditional example</p>

In your Vue instance's data, if you set "show" to equal true, this paragraph will show in the DOM. If "show" is set to false, it hides this paragraph.

var myapp = new Vue({
  el: '#my-app',
  data: {
    show: true
  }
})

There's also a v-else directive that you can use after a v-if.

<div v-if="show">First Div</div>
<div v-else>Second Div</div>

Now, if you set show to false, the DOM will display the text "Second Div".

Conditional Rendering in React

In React, to do if-else conditional rendering, it will involve writing a little more javascript compared to Vue.

Inside your render() function, and before you return your JSX template, you'll need to assign this.state to your condition variable. You also need to create a function that includes your condition logic.

render() {
  let {isLoggedIn} = this.state;
  const showOneButton = () => {
    if (isLoggedIn){
      return <button>Logout</button>
    } else {
      return <button>Login</button>
    }
}

Inside your JSX return () statement, you call that function:

return (
      <div>
        { showOneButton() }
      </div>
    );

You could refactor this using Ternary Operators, or a switch statement. There's also the Logical && Operator. So plenty of options, and some are more elegant than others. Try them out and have fun!

Consolidating My Chrome Bookmarks

Simon Lee — Mon, 13 Jul 2020 04:01:11 +0000

My collection of web development bookmarks has gotten out of control. I don't want to spend an entire day organizing them and categorizing them in folders. I thought it would be better to share with the Dev community and create a one-page reference sheet here that consolidates most of my programming and web-dev links. Am I missing anything? Feel free to leave 1 or 2 of your favs that are not on my list!
(Note: this will be updated roughly once a month or every other month.)

For my lists, I'm trying to sort them by how often I use/visit the site.

HTML

htmlreference

CSS-References

cssreference.io
css-tricks
BEM
CSS Flexbox

CSS-Frameworks

Bulma
Bootstrap
Skeleton
SemanticUI
MaterialUI

JavaScript

Flaviocopes
masteringjs
zellwk
VueJS Developers
Official VueJS
Official Vue Community

Playgrounds

CodeSandbox
CodePen
jsfiddle

General References

MDN Web Docs
W3Schools
RIP Tutorial
ThatSoftwareDude

General Cheat-Sheets

devhints
Online JavaScript Tools And Resources

MacOS/Linux

Learn to Code with Me's Unix/Mac CheatSheet

Git

git cheatsheet

Comparing React and Vue - part 1

Simon Lee — Sun, 12 Jul 2020 06:46:27 +0000

To help me learn and understand better, I'm going to write a series of posts that compare React and Vue, and how each framework codes some of the most fundamental programming concepts.
This post (and this series) is not an attempt at claiming one is better than the other. They are both very good and popular. The purpose is to increase understanding by looking at similarities and differences.

For Loops (Iteration) in a VueJS Component

So how do you loop through an array of items in Vue? here's an example from the Vue docs:

<ul>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

items: [
  { message: 'Foo' },
  { message: 'Bar' }
]

Iterate through same array in a React Component

const items = [
        { message: 'Foo' },
        { message: 'Bar' }
];

function App() {
  return (
    <div>
      {items.map((message, index) => (
        <li key={index}>
          {message}
        </li>
      ))}
    </div>
  );
}

My Takeaways

For beginners who are just starting out with JS frameworks, I can understand why they would like VueJS more. In Vue components, the HTML is neatly separated from the JavaScript and the CSS. Using Vue's directives like v-for is semantic and is inside the element that will be repeated. Pretty awesome if you are new to JS frameworks.

For more experienced developers who have been writing vanilla JS for many years, I can understand why they would prefer the JSX way with React, writing for loops inside some HTML.

Conclusion

It's a matter of personal preference and perhaps where you are in your developer journey. For less experienced coders, Vue structures its components in a friendly intuitive way and provides Vue directives out of the box to accomplish array looping.

With no previous experience with JSX, React will require some additional time in the beginning to learn how React renders its components.

I am a fan of both frameworks and looking forward to comparing another simple aspect of programming in my next post. Stay tuned, and thanks for reading.

Photo by CDC on Unsplash

HTML Snippets for Korean Developers

Simon Lee — Mon, 25 May 2020 03:57:00 +0000

Mostly inspired by some of the free snippets available at freeformatter.com

20 Largest Cities, South Korea

<select>
        <option value="Seoul">Seoul</option>
        <option value="Busan">Busan</option>
        <option value="Incheon">Incheon</option>
        <option value="Daegu">Daegu</option>
        <option value="Daejon">Daejon</option>
        <option value="Gwangju">Gwangju</option>
        <option value="Suwon">Suwon</option>
        <option value="Ulsan">Ulsan</option>
        <option value="Changwon">Changwon</option>
        <option value="Goyang">Goyang</option>
        <option value="Yongin">Yongin</option>
        <option value="Seongnam">Seongnam</option>
        <option value="Bucheon">Bucheon</option>
        <option value="Cheongju">Cheongju</option>
        <option value="Ansan">Ansan</option>
        <option value="Jeonju">Jeonju</option>
        <option value="Cheonan">Cheonan</option>
        <option value="Namyangju">Namyangju</option>
        <option value="Hwaseong">Hwaseong</option>
        <option value="Anyang">Anyang</option>
</select>

List of South Korea's Provinces

<select>
        <option value="Chungcheongbuk-do">Chungcheongbuk-do</option>
        <option value="Chungcheongnam-do">Chungcheongnam-do</option>
        <option value="Gangwon-do">Gangwon-do</option>
        <option value="Gyeonggi-do">Gyeonggi-do</option>
        <option value="Gyeongsangbuk-do">Gyeongsangbuk-do</option>
        <option value="Gyeongsangnam-do">Gyeongsangnam-do</option>
        <option value="Jeollabuk-do">Jeollabuk-do</option>
        <option value="Jeollanam-do">Jeollanam-do</option>
        <option value="Jeju Special Self-governing Province">Jeju Special Self-governing Province</option>
</select>

List of Seoul's Districts (ranked by population)

<select>
        <option value="Songpa-gu">Songpa-gu</option>
        <option value="Gangseo-gu">Gangseo-gu</option>
        <option value="Nowon-gu">Nowon-gu</option>
        <option value="Gangnam-gu">Gangnam-gu</option>
        <option value="Gwanak-gu">Gwanak-gu</option>
        <option value="Eunpyeong-gu">Eunpyeong-gu</option>
        <option value="Yangcheon-gu">Yangcheon-gu</option>
        <option value="Gangdong-gu">Gangdong-gu</option>
        <option value="Seongbuk-gu">Seongbuk-gu</option>
        <option value="Guro-gu">Guro-gu</option>
        <option value="Seocho-gu">Seocho-gu</option>
        <option value="Jungnang-gu">Jungnang-gu</option>
        <option value="Yeongdeungpo-gu">Yeongdeungpo-gu</option>
        <option value="Dongjak-gu">Dongjak-gu</option>
        <option value="Mapo-gu">Mapo-gu</option>
        <option value="Gwangjin-gu">Gwangjin-gu</option>
        <option value="Dongdaemun-gu">Dongdaemun-gu</option>
        <option value="Dobong-gu">Dobong-gu</option>
        <option value="Gangbuk-gu">Gangbuk-gu</option>
        <option value="Seodaemun-gu">Seodaemun-gu</option>
        <option value="Seongdong-gu">Seongdong-gu</option>
        <option value="Geumcheon-gu">Geumcheon-gu</option>
        <option value="Yongsan-gu">Yongsan-gu</option>
        <option value="Jongno-gu">Jongno-gu</option>
        <option value="Jung-gu">Jung-gu</option>
</select>

source: Wikipedia.org

How did you get your first Dev Job?

Simon Lee — Fri, 24 Apr 2020 08:35:29 +0000

Poll: How did you get your 1st job in web development?
a. recruiter
b. during college via career placement office, job fairs, etc.
c. side-hustle/free-lancing, short-term gigs that lead to full-time
d. friend, friend of a friend (connections)
e. other