Today I Learned

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.

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.

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++) {
  posts.push(cards[i]);

  if (i !== 0) {

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

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

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(); ?>

2. Get all the categories:

<?php $categories = get_categories(); ?>

3. 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 ===
 $category->cat_name
     ? "is-active"
     : ""; ?>" 
  href="<?php echo $category_link; ?>">
  <?php echo $category->name; ?>
  </a>
<?php endforeach; ?>

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

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'
      document.body.appendChild(iFrame)
     }

     let form = document.createElement('form')
     form.method = 'POST'
     form.action =
        'https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8'
     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')
       form.appendChild(input)
     }

     document.body.appendChild(form)
     form.submit()
  }
},

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

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.