How to separate WordPress loop into sections

In one of my recent projects, the client wanted to create a homepage with several different layouts for groups of posts. Normally this is not a problem – you can just create several loops, reset them, and you can get any imaginable layout. But this was a different pair of boots – the homepage consisted of several sections, with widget areas in between, while each section (there were three sections of posts) had a different layout. Moreover, the second and every other page of posts had a different layout again. I’m sure there are couple of ways to achieve this, but I found the method with counter as the most convenient one. (more…)

How to retrieve featured image URL in WordPress

If (for some reason) you have the need to get the featured image (or post thumbnail) URL, you can do it with wp_get_attachment_image_src() function, for example like this:

 

How to create custom comment walker class in WordPress

There are several walker classes in WordPress – I don’t actually know how many there are because I tend to browse the source code only if I need to change something, just as others I guess :). Regardless, I’m sure that custom navigation walker class is probably the most used and customized WordPress walker class. But recently I had a project where I needed to change meta info which appears next to Gravatar image in the comments section.  When it comes to any walker classes in WordPress, I guess that the main idea is that you take the whole code, put it into functions.php or elsewhere and use function callback to call it. I guess… (more…)

How to change a WordPress plugin function using action hooks

This is just one of the many possible scenarios on how to change a function in a WordPress plugin, but let me show you a real world example from Easy Property Listings, a really great and customizable real estate plugin. My client wanted to remove the <a> element from featured image on single property listing page. The thing was that if you click on that image, it would take you to that same post anyway, so having a link there was a redundant thing to have.

(more…)

How to copy text from website to clipboard

So this is the scenario – you have this text on your website and would like to have a button that would allow the visitor to copy the text into clipboard using one click, without requiring them to select the text manually. Thankfully, there is a clipboard.js library, allowing us to perform different kinds of scenarios easily. Let me show you one of the examples, implemented into WordPress.

(more…)

Creating responsive charts with JavaScript

Back in the day when web developers didn’t have to care about responsive layouts, life was easier in some cases. For example – charts. There are quite a lot of types of charts and in the beginnings of responsive web, creating responsive charts surely wasn’t a trivial task. But nowadays, given that there are thousands of different JavaScript libraries, it is no surprise that there are excellent libraries for charts. One of my favorite is Chart.js. In case you want to use it on WordPress, you can code it manually or use a WordPress Charts plugin. (more…)