Quickly Interact With the Selected Element in Dev Tools

Today I learned that there is a very handy shortcut for interacting with the currently selected DOM element in your browser’s console:

  1. Open dev tools in Chrome or Firefox
  2. Select an element / a node in the “inspect” tab
  3. You can now reference the selected element with $0 in the “console” tab and start interacting with it.
See how it works in Firefox (same in Google Chrome)

By the way: you don’t need to have the element currently selected anymore, since $0 means “the most recently selected node”. Also there is $1 to $4 for the last-selected to fourth-ago-selected node, as described in the Google Chrome Console Utilities API reference (might vary with other browsers).

Easy whitespace trimming with Twig

When using the Twig templating engine for PHP you might have used the trim filter to trim away any possible existing blanks at the beginning and end of a string:

{{ '  I like Twig.  '|trim }}

{# outputs 'I like Twig.' #}

Another way to trim out whitespaces is by using the – modifier:

<li>
    {{- value }}    </li>
{# outputs '<li>no spaces    </li>' #}

Use an Image From a URL With Timber

Most of the time when creating a WordPress website based on Timber I am working with local images that were added through the WordPress media library or uploaded using an ACF image field. You use these with the help of the get_image() function of Timber.

But sometimes it can come in handy to work with images from an URL source – be it from another site or even your own server.

Here is how to do that with the get_external_image() function:

$context = Timber::context();

// Lets say you have an external image that you want to use in your theme

$context['cover_image'] = Timber::get_external_image($url);

Timber::render('single.twig', $context);

Then in your twig file you can use the typical filters and properties:

<img src="{{ cover_image.src }}" class="cover-image" />

Helpful documentation for further information: Timber\externalImage and work with external images.

Clone All Files From a Single Git Branch Without Git History

When starting a new WordPress theme project I usually create a new Git repository for my custom theme to be stored in. Into that I want to clone the files of the starter theme I am using (Flynt), but without that project’s Git history (.git directory). Here are two ways to do that:

Use Git Commands to Clone Without History

I have my new repo locally at ~/code/new-theme and want to clone the next branch of the public https://github.com/flyntwp/flynt repo into that:

cd ~/code/new-theme
mkdir tempclonedir
cd tempclonedir
git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt . 
rm -rf .git
cd ..
mv tempclonedir/{.,}* .
rm -r tempclonedir

Of course you can combine these commands into a one-liner like so:

cd ~/code/new-theme && mkdir tempclonedir && cd tempclonedir && git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt .  && rm -rf .git && cd .. && mv tempclonedir/{.,}* . && rm -r tempclonedir

Using degit to Clone Single Git Branch

Alternatively you can use degit to make the same task easiert. It’s a Node.js package maintained by Rich Harris, the creator of Svelte.

First install degit globally:

npm install -g degit

Then to do the same as above run the following command:

cd ~/code/new-theme
degit https://github.com/flyntwp/flynt#next

Note: if you are cloning into a new git repo (that already has a hidden .git directory and therefore isn’t empty) you have to append the “–force” parameter.

Automatic Text Excerpt / Truncated Texts with Twig

Today I had to create a grid of cards for a search page. To ensure a consistent layout I wanted the excerpt texts to be cut off, if necessary, at certain length.

This can be done easily when using the truncate filter in the Twig template engine for PHP:

toLongText|truncate(14)

The number 14 stands for the number of words after which the text will be cut off and an ellipsis is added.