Today I Learned

How to disable WordPress parent menu link

Working with WordPress menus, I wanted a top-level navigation element to act as a trigger for a drop-down menu.

It took me some time to figure out how to make this navigation element not redirect anywhere, but it was so easy.

You need to take the following steps:

  1. Insert a custom link with any link address and label that you want.

  2. Click on the 'Edit Menu Item' and delete the link that you insert previously.

  3. Create the sub-menu with the wanted links.

  4. Save.

That's all, nothing more, nothing less.

How to create pagination for custom taxonomy in WordPress

To create a pagination for the custom taxonomy archive, you must enter the following snippet in the code:

function custom_tax_query_change( $query ) {
     if ( ! is_admin() && $query->is_tax( 'example_taxonomy_name' ) ) {
          $query->set( 'posts_per_page', 10 );
add_action( 'pre_get_posts', 'custom_tax_query_change' );

The 'post_per_page' tell us how many posts we want to display per page. If you want more or less, you can change the value as you need.

How to dynamically display different types of cards based on a pattern

Let's say you have an array of cards inside which you want add more items.

Example: [card, card, card, itemOne, card, card, itemTwo, ...]

For this we will create another empty array that we will work with:

let posts = [];

const itemsTemplate = [itemOne, itemTwo];
let items = [itemOne, itemTwo];

for (let i = 0; i < cards.length; i++) {

  if (i !== 0) {

    //next index is multiple of 3
    if ((i + 1) % 5 === 3) {
      if (items.length === 0) {
        items = itemsTemplate;

    //next index is multiple of 5
    if ((i + 1) % 5 === 0) {
      if (items.length === 0) {
        items = itemsTemplate;

How to display all the categories for blog posts from WordPress

To display all the categories of posts in WordPress and the active category, you need to go through the following steps:

  1. Get the current category:
<?php $current_category = get_queried_object(); ?>
  1. Get all the categories:
<?php $categories = get_categories(); ?>
  1. Use a loop to iterate all the categories:
<?php foreach ($categories as $category):
    $category_link = get_category_link($category); ?>
 <a class="blog__category <?php echo $current_category->cat_name ===
     ? "is-active"
     : ""; ?>" 
  href="<?php echo $category_link; ?>">
  <?php echo $category->name; ?>
<?php endforeach; ?>

Now you can see all the categories that are used on your blog posts and the current selected category.

Use a hidden iframe to submit a form via Javascript for legacy applications

To prevent the page from being redirected or refreshed, we will create a javascript iframe inside which we will create the form:

methods: {
  hiddenIframe(fields) {
    let customHiddenIframeName = 'iframeId'
    if (!document.getElementById(customHiddenIframeName)) {
      let iFrame = document.createElement('iframe')
      iFrame.id = customHiddenIframeName
      iFrame.name = customHiddenIframeName
      iFrame.src = 'about:blank'
      iFrame.style.display = 'none'

     let form = document.createElement('form')
     form.method = 'POST'
     form.action =
     form.setAttribute('target', customHiddenIframeName)
     for (let fieldName in fields) {
       let input = document.createElement('input')
       input.name = fieldName
       input.value = fields[fieldName]
       input.id = fieldName
       input.setAttribute('type', 'hidden')


created() {
    email: 'example@test.com',
    name: 'John Doe',
    subject: 'Form',
    description: 'Form description'

How to create a social media share button

If you want to share your site on social media, you can create different types of buttons that can do this:

For Facebook:

<a href="https://m.facebook.com/sharer.php?u=yourwebsite.com" title="Share on Facebook" class="social__link" target="_blank" rel="external noopener">Share on Facebook</a>

For LinkedIn:

<a href="https://www.linkedin.com/shareArticle?mini=true&url=yourwebsite.com" title="Share on LinkedIn" class="social__link" target="_blank" rel="external noopener">Share on LinkedIn</a>

For Twitter:

<a href="https://twitter.com/share?url=yourwebsite.com" title="Share on Twitter" class="social__link" target="_blank" rel="external noopener">Share on Twitter</a>

Instagram currently doesn’t allow you to share a photo or video from another website – you can only upload photos/videos directly from your mobile device. Since there is no sharing mechanism, there is no way for us to include a button that will share your content to Instagram.

Netlify CMS relation widget with a list

As I was using Netlify CMS, I wanted to use a relation widget that would dynamically add content depending on the other collection title field.

It's really easy to do this, but I struggled a little bit with it because the documentation wasn't so explicit, and I could not find something useful on the internet.

So here's how you do it:

This is the collection that will have dynamic content, depending on how many call-to-actions you'll create.

  - name: 'call-to-action'
    label: 'Call to action'
    path: "{{slug}}"
    create: true
    folder: 'content/call-to-action'
      - {label: 'CTA Category', name: 'ctaCategory', widget: 'string'}
      - label: 'CTA Content'
        name: 'cta'
        widget: 'list'
        - {label: 'Title', name: 'title', widget: 'string' }
        - {label: 'Content', name: 'content', widget: 'string' }
        - {label: 'cover', name: 'cover', widget: 'image', media_folder: '/assets/images/covers/'}
        - label: 'Button'
          name: 'button'
          widget: 'object'
          - {label: 'url', name: 'url', widget: 'string'}
          - {label: 'title', name: 'title', widget: 'string'}

And now we have to link this collection to a field in the blog collection. The field in the blog collection looks like this :

- { label: 'Call to action category',
 name: 'ctaCategory',
 widget: 'relation', 
 collection: 'call-to-action', 
 search_fields: ["ctaCategory"], 
 value_field: "cta.*", 
 display_fields: ["ctaCategory"]}

The search will be done depending on what "ctaCategory" you select, and to get all the items in the list widget from the "call-to-action" collection, we need to specify in the value field that we want to get every item, and you do this with ".*".

That's all .