Missing value: size [size], color [color], gender [gender], age group [age_group]. Are you getting any of these notifications in Google Merchant Center and Googe Ads? If so, here are several different ways to fix it.

Overview: ways to fix the feed

1. Create Product Attributes
2. Create Product Custom Meta
3. Create Literal Value in the Feed
4. Update Feed Manually in Google Merchant Center

Any of the above will fix the issue with missing values. I’ll elaborate on each approach at a later date. For now, if you need help, reach out and I’ll help/update the post.

Resources

• Color attribute’s acceptable values:
  https://support.google.com/merchants/answer/6324487
• Age attribute’s acceptable values:
  https://support.google.com/merchants/answer/6324463
• Gender attribute’s acceptable values:
  https://support.google.com/merchants/answer/6324479

Here are the steps we take to protect an external hard drive:

1. Open Disk Utilities
2. Select the drive to protect
3. Select Erase
4. Rename the drive
5. Provide a secure password and a useful hint
6. Erase and recreate the password protected drive
7. Enjoy protect external assets

1. Open Disk Utilities

>

2. Select the drive to protect

3. Select ‘Erase’

4. Rename the drive

5. Provide a secure password and a useful hint

6. Erase and recreate the password protected drive

7. Enjoy protect external assets

Disk was: Elements
Disk now: TimeMachine MacBook Pro

Also, how to fix “nfsd service does not appear to be running”

This solution is for Mac users only – thanks CW.

Short answer:

1. Open “System Settings”
2. Unlock padlock
3. Select “Full Disk Access”
4. Add “Terminal” (or whatever you use)
5. Close padlock
6. Restart Terminal (if open)

There are several ways to add custom styling to the classic editor, including:

• loading a custom stylesheet, using add_editor_style('custom-editor-style.css'),
• loading a custom stylesheet, using add_filter('mce_css'), and
• loading dynamic styles, using add_filter('tiny_mce_before_init') and appending style properties to $settings['content_style'].

In this post, we’ll focus on the latter, which we can use to get the Customizer’s CSS.

Loading Customizer CSS into the Classic Editor

The Customizer’s theme CSS is stored in the post table, with post type custom_css. To get this we’ll use get_posts(), then we’ll append the post_content to $mce_settings['content_style'] (after sanitising it). Here’s the WordPress filter, note that I’ve used an anonymous function, but you don’t have to:

add_filter('tiny_mce_before_init', function ($mce_init) {
    $customizer_posts = get_posts('post_type=custom_css&numberposts=1');
    $styles = $customizer_posts[0]->post_content ?? '';
    
    // return early if no stlying was found
    if (!$styles) return $mce_init;
    
    // sanitise ready for use
    $styles = sanitize_text_field($styles);
    
    // add styling
    if (isset($mce_init['content_style'])) {
        $mce_init['content_style'] .= " $styles ";
    } else {
        $mce_init['content_style'] = " $styles ";
    }
    
    // return updated settings
    return $mce_init;
});

And that’s how to add customizer CSS into the classic editor.

If you’re struggling with this or any other WordPress challenge, don’t hesitate to get in touch for further support.

Once upon a time, a challenge like this, where you want to reveal a footer when the end of the content is reached, would have needed position: fixed|absolute and a bit of JavaScript to calculate the dynamic height of the footer, for responsiveness.

Thankfully, we now have a much simpler solution, using sticky positioning. With position: sticky we don’t need to worry too much about the height of the footer, we can simply set a sensible minimum viewport size that we’re confident the footer will fit in and voila, a footer that reveals from underneath the content above it.

Code example to reveal a footer

@media (min-width: 1200px) and (min-height: 600px) {
    .any-preceding-siblings {
        z-index: 2;
    }
    
    footer {
        position: sticky;
        bottom: 0;
        z-index: 1;
    }
}

Sticky positioning, like many styling customisations, is easy when you know what can be achieved with CSS3 and CSS4. If you’re looking for help with custom styling or would like help designing your web pages, please reach out and we’ll gladly help.

Check out our other CSS tips: CSS

On a couple of occasions, I’ve encountered a very annoying issue where PhpStorm will not open. Instead of opening it throws up the error message, “the IDE cannot create the directory.”, in a modal window.

I’m using JetBrains’ Toolbox to manage their IDEs and on the whole it’s a great little app to navigate their many IDEs and reopen an existing project. But, like a lot of software that we come to rely on, it’s a complete pain in the arse when it, seemingly out of the blue, stops working.

Why is PhpStorm not loading from the JetBrains Toolbox app?

The error message states that the problem may stem from incorrect permissions or the parent directory being read-only  – the full message is:

The IDE cannot create the directory.
Possible reason: parent directory is read-only or the user lacks the necessary permissions.

If you have modified the ‘idea.log.path’ property, please make sure it is correct, otherwise, please re-install the IDE.

—–
Location: /Users/<username>/Library/Logs/JetBrains/PhpStorm2031.3
java.nio.file.AccessDeniedExpection: /Users/<username>/Library/Logs/JetBrains/PhpStorm2031.3

How to fix “the IDE cannot create the directory”

After trying many suggestions on the Web, including reinstalling PhpStorm, I found that the really simple process of removing the log files completely resolved the problem. This works because it forces the initialisation process to recreate them, and, in doing so, it creates them with the correct permissions.

Remove log files using the command line

The easiest way to remove these files is using the following command, which will recursively remove the “Log” folder and all it’s content:

$ rm -rf ~/Library/Logs/JetBrains

Removing log files using Finder

If you’re not comfortable with the CLI then you can always use the Finder app to remove them by taking the following steps:

1. Choose “Go” from Finder’s menu options
2. Enter the location from the error message, or the following, replacing <username> with your account:
   /Users/<username>/Library/Logs
3. Delete the JetBrains folder

This solution didn’t work for you?

After a lot of research that all fell short of a solution, the process above of removing the log files, fixed the problem for me, on more than one occasion. However, it may be that, even though you’re getting the same error, your problem may not be the same as mine? So if this solution doesn’t work for you I’d strongly recommend you contact JetBrains technical support, or you carry out some more research and try some of the other fixes that have helped others.

Make the sticky element a block and make a parent relative.

<section style="display: relative">
  <div style="position: sticky; top: 150px; background: pink;">
    I'm sticky
  </div>
  <div style="padding-bottom: 100vh">
    some content...
  </div>
  <span style="position: sticky; top: 150px; display: block; background: darkcyan;">
      Me too!
  </span>
  <div style="padding-bottom: 100vh">
    some more content...
  </div>
</section>

Here’s how to make position sticky work on Safari and Safari mobile

Follow this simple checklist:

1. Add position : sticky to the element that’s going to be sticky.
2. Add top: 100px to the sticky element. This is the offset top of whatever you need it to be.
3. Add display: block to the sticky element. flex and grid should work, too. *This is where Safari trips up, as inline or inline-* will not work.*
4. Add position: relative to the parent (or ancestor) element that’s the sticky element is to stay within.
5. Enjoy sticky elements.

That’s it, but if you need more help, please get in touch.

Use Live Templates to create custom code snippets that you can quickly insert into your code by typing a custom abbreviation. This is extremely handy for commonly used code blocks, such as the echo statement in php or inserting a php block into html.

In this example I’ll demonstrate how to create a php block (<?php ?>) with the cursor moved into the block, ready for the php code. The trigger for the Live Template will be ppp.

A Live Template to insert a PHP block

Note that this walkthrough is for PHPStorm, but the process should be the same or very similar for many of the JetBrains editors, such as WebStorm and IntelliJ.

1. Open the editor and click CMD + , to open the IDE’s preferences.
2. Navigate to Live Templates > HMTL/XML:
   
3. Click the ‘+’ icon in the right pane to add a new template (option 1 if prompted).
4. Give the new template an abbreviation (the trigger text) and a description:
   
5. Add the template text. In this case, we want to create a php block in an html file and move the cursor to inside the code block, which is achieved using the IDE parameter $SELECTION$:
   
6. Set the application context to ‘HTML Text’ and click ‘Apply’ to add the new live template:
   
7. Finally, use your new live template by typing ppp and hitting enter:
   

Conclusion

Writing simple Live Templates like the one above dramatically reduces the time spent on tiny, but regular tasks.

Have you ever needed to programmatically move a meta box in the WordPress editor screen? Maybe you’ve needed to change its priority or position? I know I have, many times.

Recently, I needed to move a meta box to the top of the editor screen, just under the main editor (in ‘classic editor’ mode) and all the usual suspects had no answers. So here’s my solution, which I think is pretty robust.

Using the ‘edit_form_after_title’ hook

This hook is the perfect just-in-time point to jump in and update the $wp_meta_boxes global variable. I’m using it in conjunction with $current_screen to ascertain the current admin screen, then I’m looking through the ‘high’ meta boxes and removing the one I’m looking for. Why? Because it can then be prepended to the array, forcing it to be the first of the ‘high’ meta boxes.

Here’s the code to move a meta box titled ‘PriceList’ to the top

NB: the action hook, edit_form_after_title, has one parameter; the WP_Post object, but it’s not needed in this instance.

/**
 * Move the 'pricelist' meta box to top of the 'high' area of the editor screen
 */
add_action('edit_form_after_title', function () {
    global $current_screen, $wp_meta_boxes;

    // only do stuff if this is the editor screen for the post type 'project' and it has meta boxes
    if ($current_screen->id === 'project' && isset($wp_meta_boxes['project'])) {

        // loop though 'high' meta boxes
        foreach ($wp_meta_boxes['project']['normal']['high'] as $key => $high_box) {

            // do stuff if the meta box with the title 'PriceList' is found
            if ($high_box['title'] === 'PriceList') {
                // grab the meta box
                $meta_box = [$key => $high_box];

                // remove it from the array of 'high' meta boxes
                unset($wp_meta_boxes['project']['normal']['high'][$key]);

                // add it to the start of the array
                $wp_meta_boxes['project']['normal']['high'] = $meta_box + $wp_meta_boxes['project']['normal']['high'];
            }
        }
    }
}, 100);

As can be seen from the code above, the target meta box will now be the first one in the array, as required.

Are there other ways to move meta boxes?

As with most things in life the answer’s yes! You could manually move them by dragging them to the desired position, but this is a per-user setting, so not ideal if you want to set the default layout for all users. You could use <a href="https://developer.wordpress.org/reference/functions/do_meta_boxes/" target="_blank" rel="noopener noreferrer">do_meta_boxes()</a> and <a href="https://developer.wordpress.org/reference/functions/remove_meta_box/" target="_blank" rel="noopener noreferrer">remove_meta_box()</a> to remove the target meta box, then add it back where required, using <a href="https://developer.wordpress.org/reference/functions/add_meta_box/" target="_blank" rel="noopener noreferrer">add_meta_box()</a> You can even use custom hooks provided by plugins, where they’re available, which is what I used to move the Yoast meta box to the bottom of the screen.

Need help with technical WordPress challenges?

If you’d like help with WordPress please get in touch and we can discuss your particular challenge.

Have you needed to apply styling to only touch devices, or only non-touch devices? Well, great news CSS4’s @media (hover: [value]) can come to the rescue in a multitude of ways.

What is CSS4?

For some time we’ve been working with CSS3, which I think is pretty epic, especially when compared to what came before. And CSS4 goes much further, offering super useful functionality to enhance how we interact with webpages. But, for now, we’re only focusing on the media query above, that, for me, is a breath of fresh air, as it vastly simplifies scenarios where I only want to target devices that have specific ways of interacting with the. e.g a touch-only device.

Use-cases for the hover media query

Here are two use-cases to whet the appetite, hopefully, they’ll show the power and flexibility of this awesome new media query?!

Use Case 1: increase spacing between tap targets on touch devices

I’ve had this one a few times, where the links are considered too close, thus reporting accessibility issues. The solution is to give each link (tap target) more spacing on touch devices. In this use case, I’m also using the media query pointer to detect the type of pointer (none|coarse|fine) – a perfect use-case for the hover media query:

@media (hover: none) and (pointer: coarse) {
  .nav-link {
    margin: $nav-link-margin--touch-only;
  }
}

Use Case 2: hover effects for devices with hover capability

I was recently building a website where the creative direction required a simple animation that zoomed in on images when hovered over. This featured is intended only for devices that support hover (i.e. mouseover, etc). Here’s a code snippet that increases the scale of the image element when its parent is in a hovered state :

@media (hover: hover) {
  .image-wrap {
    overflow: hidden;

    > img {
      transform: scale(1);
      transition: 0.25s ease-in transform;
    }

    &:hover > img {
      transform: scale(1.15);
      transition: 2.5s ease-out transform;
    }
  }
}

As I’ve shown in the two use cases, this is a pretty useful media query and one I will be making a lot of use of. I’m also sure it can be used in conjunction with nest media queries? There is, however, one caveat; there is no support for Internet Explorer and Opera Mobile. But I no longer support IE, unless the client explicitly needs it and frankly cannot support the insanely restrictive Opera Mobile browser (unless the client needs it).

So, there it is, the awesome hover media query in CSS4. Enjoy using it!

Do you have uses for hover media query?

If you’ve got another use-case for this query, or you’d like help implementing it on your sites’ then please get in touch as we’d love to help make use of this great CSS feature.