Latest Posts

Increase JPEG Quality in WordPress

When you publish an image to WordPress it’s processed and compressed to 90 % of its initial JPEG quality. This is a default setting that’s in location to instantly enhance every image, which in turn can hopefully accelerate your site’s packing time.
It’s a good enough little feature, however the fact that it takes place behind the scenes without anyone truly understanding it’s going on can cause some users a great deal of grief. Particularly photographers who see a drop in JPEG quality each time they submit an image.
There’s no alternative to change this within the WordPress admin and not having the power to control the JPEG quality of your images can be frustrating.
Stop Compressing My Images Already!
Just like the majority of features in WordPress, there’s a filter or action in location that we can hook into which will certainly allow us to modify and customize particular functions. For this mod, the filter we need to hook into is called jpeg_quality.

All the filter needs is a quality setting between 1 and 100, with 100 being no compression whatsoever.
You can check out a bit about the jpeg_quality filter and see the initial function by taking a look at the code reference page.
Requirements More Compression
If you’re somebody who believes in the complete level of enhancing your images, then compressing them much more might be the way to go. It’s an easy sufficient change because all you have to do is decrease the JPEG quality to a setting listed below the default of 90.

You can always play around with the number and test out the outcomes. You might find a best balance between smaller sized file size and ideal image quality.
Make it simpler on yourself and set up the Regenerate Thumbnails plugin so you don’t have to re-upload your images again and once again while trying out various quality settings.
If you have any ideas or remarks, please don’t hesitate to utilize the type listed below to begin a discussion.
Showcased image supplied by Death to the Stock Photo.


Add More Details to the Previous Post Link

<aWhen you load up the latest post on an effectively designed WordPress website, you should see a link for the previous post someplace on the page. It usually appears right after the primary content. On older posts, you'll also find a link indicating the next post.
These previous/next links are often referred to as the "post pagination". No to be confused with "posts pagination" which appears on archive pages to links to the previous/next page to show a list of older/newer posts.
In most WordPress themes, the previous link is shown using the following function:

If you have a look at the previous_post_link() page in the WordPress codex you can see the offered parameters. If you use the code example above, the % title placeholder will be changed with the previous post's title.
Because we want to include more details to the previous post link, let's take a look at get_previous_post() instead. That function recovers all the information for the previous post which will certainly provide us the capability to tailor things nevertheless we desire.
Gathering Previous Post Link Particulars
Here's a little function that will certainly load the additional information we're going to make use of.

if ($ prev = get_previous_post())

In the above code, we set up a couple of variables with the previous post's title, excerpt, time and author. There's a word limit set for the excerpt utilizing wp_trim_words(). If you wish to increase/decrease this value, modification 15 to whatever you want.
Adding the HTML.
With those variables set, we can now utilize some HTML to show all the details for our previous post.


;? >” >.
& rarr;. Styling It Up. Right here are the CSS selectors and some basic CSS:

. previous
max-width: 50 %;.
width: 100 %;.
float: left;.
font-size: 14px;.
padding-left: 40px;.

. previous.icon

. previous strong

. previous em

I have actually likewise added a black background and white text to the example image below making it stand apart form the page.

Despite the fact that the example above is for the previous post link, the next post link can be displayed and styled in a similar method making use of get_next_post().
If you have a tip or remark, please make use of the form below.
Included image provided by Gratisography.


Add Word Count to Single Posts in WordPress

This is simply a quick little snippet to display a word depend on the single post page in WordPress. Considering that it requires being placed within the loop, you can in fact add it to any design template file that includes a loop, such as archive.php or index.php.
The example below is for my premium Destin theme, which likewise has a basic version offered for free through
Considering that we’re modifying the style’s core files, I recommend very first producing a youngster style. This ensures that the changes remain undamaged when you update the style in the future.
Check out my tutorial Creating a Youngster Style in WordPress for guidance.
The Standard Function
When you have actually produced your youngster theme, include this brief block of code in its functions.php file:

function bavotasan_word_count()

str_word_count is a simple PHP function that counts the variety of words inside string. All we’re doing is loading up the post’s content as the string after we have actually removed out all HTML tags. Otherwise, those tags would be counted as words and screw up the total.
With that code in location, we can add bavotasan_word_count() to the theme’s content.php file.
Displaying the Word Count.
We desire the word count to appear on the left with the post’s meta data, so include the brand-new function within this block of code:.

Here’s the new function:.

Include it all together:.

Look into the image below to see exactly what it’ll look like:.

It’s an easy enough mod that permits you to include a bit more meta information for each of your posts.
If you have any ideas or would like to contribute to this tutorial, kindly utilize the comment area below.


Get rid of Thumbnails for Customized Post Types

For a recent project, a client required a front end uploader to permit their consumers to submit a consent form. Once they completed the kind they could upload it as a PDF or JPG. Each type would be linked to a custom-made post type which contained other information about the user.
The PDFs presented no issues, but due to the fact that WordPress produced thumbnails when processing images, the JPGs were automatically converted into multiple image sizes.
Every permission form submitted as a JPG included a minimum of 3 extra files. That meant one hundred uploads would become 4 hundred, with three hundred files that would never ever be used. That could build up rapidly and utilize a lot of space on their server for no factor.
Instead of needing to go in and delete the additional files, I needed to find a way to nip the process in the bud and get rid of thumbnails for those custom post types prior to they were produced.
When you publish an image, WordPress passes the meta information through a filter which processes the default images sizes: thumbnail, medium and full. You manage the sizes under the Settings → Media admin page. You could set all sizes to absolutely no and no additional images would be produced whatsoever, though that stopped working in WordPress 4.0. Plus it wouldn’t have actually worked for this customer considering that they only had to files gotten rid of for the custom-made post type.
No More Extra Files
In order to remove thumbnails and stop creating those additional image sizes, I hooked into the intermediate_image_sizes filter.
This is the code I contributed to functions.php:

add_filter( ‘intermediate_image_sizes’, bavotasan_custom_intermediate_image_sizes, 999 );.
function bavotasan_custom_intermediate_image_sizes( $image_sizes)

Initially I inspected if they were publishing to the customized post type, then I returned an empty variety instead of the default image sizes. Easy enough.
No Thumbnails Whatsoever.
If you wish to stop this for all uploaded images, you might simplify the code even more:.

add_filter( ‘intermediate_image_sizes’, bavotasan_custom_intermediate_image_sizes, 999 );.
function bavotasan_custom_intermediate_image_sizes( $image_sizes)
return variety();.

Now you only have to return an empty range. No have to look for a custom post type.
Either one of the functions above will certainly wind up saving you a great deal of space. If you do not requires those additional files, remove them prior to they’re produced.
If you understand of a better solution, don’t hesitate to include your ideas in the comment area below.


Permanently Delete Default WordPress Themes

If you develop a custom-made WordPress style for a client’s website, I make sure you spend some time erasing the styles (and plugins) that come pre-installed with WordPress There’s absolutely nothing wrong with them, but if you’re planning on personalizing things, you really do not have to leave them there.
I see it as a little security measure so that the client does not mess everything up by unintentionally changing themes. Plus, it’s better to eliminate themes (and plugins) if you’re not utilizing them. No need to lose the storage space.
A Small Issue when Updating WordPress.
One problem that will certainly keep taking place, is that those default themes will certainly be re-installed each time you upgrade WordPress to the latest release. It’s a bothersome tick that might present a potential problem now that things upgrade instantly. I prefer to play it safe and fortunately there’s a simple way to make sure this doesn’t keep occurring.
All it takes is a single line contributed to your wp-config. php file:


With that in place, the default WordPress themes (and plugins) will not come back after you delete them.
Play It Even Safer.
Occasionally, you may encounter a concern if you delete all the default themes when WordPress tries to switch back to a theme that no longer exists. This will certainly leave you with the white screen of death, which most customer’s frown upon.
With another line of code contributed to wp-config. php, you can make sure that at any time this takes place the default style will be among your picking. No more blank screens.

define( ‘WP_DEFAULT_THEME’, ‘theme-folder-name’ );.

Simply be sure to change theme-folder-name to your real theme’s folder name. If you’re utilizing Publication Premium you would change it to magazine-premium. If you were utilizing Arcade, it would be game. And so on.
Learn more about customizing wp-config. php in the WordPress Codex.


Destin Premium WordPress Style

It’s been a while because I have actually updated I was sidetracked with raising my children, remodeling my home and making a brief film. Between all that I still handled to support everyone who purchased one of my themes and in some way squeezed together a brand-new theme called DESTIN.
It’s a darker theme constructed utilizing Masonry and some brand-new 3D hover results. The end products is fairly cool and I hope it will motivate people to produce some amazing site.
Have a look at the demo or go to Styles by to try out the fundamental version or buy the premium version.


Jetpack Mobile and Googlebot

Just recently, to my horror, I received an e-mail from Google mentioning that wasn’t mobile friendly. How could this be? I make every website I build mobile-friendly. For goodness sake, I even launched my own (entirely out-of-date) responsive grid structure. This is a Gridiculous mistake.
Of course it wasn’t. I knew did not have a mobile-friendly design and I had come to accept that over the years. However Google couldn’t leave it alone. They had to bring it up and rub my face in it like an incontinent dog. I needed to respond.
I’m a very lazy individual. I have my productive moments, but all in all I want to do nothing as much as I can. And so, the easiest method for me to conquer my website’s absence of responsiveness was to find an option that would require the least quantity of time and energy on my part. Enter Jetpack.
I make use of Jetpack on the majority of my sites for numerous of its fantastic functions. One I have actually never ever used is the Mobile Theme. The other day I turned it on et voilà (French for “and voilà”), was immediately changed into a modern-day, stunning, mobile-friendly site. The world rejoiced. It was now time to stick it to Google using their Mobile-Friendly Test to show them simply how mobile-friendly had become. To my shame, failed to pass …

I tested the website out on my iPhone and it looked great. Exact same thing when I tried it out utilizing Chrome’s dev tool emulator. What was going on? I did some research study to see if others had actually come across the very same concern and the only thing that showed up talked about the possibility of my robot.txt file obstructing Googlebot from parsing my JavaScript and CSS. Checked that out however it had not been the culprit.
After digging a little deeper, I discovered the actual concern: W3 Total Cache. It’s a fantastic plugin and it wasn’t a lot its fault, as it was just one of the default settings. The good news is it was an easy fix.
The most recent release of W3 Overall Cache has a User Representative Groups admin page which has the 2 default groups disabled by default.

W3 Overall Cache– User Representative Groups

Trigger both groups by examining the “Allowed” box. When you save, make sure to clear your cache. If you make use of a CDN you may likewise need to purge it.
With that in location, my cache cleared and my CDN purged, I went back to Google with my fingers crossed to check out my website once again. And BOOM!

Things were looking great and my site was now confident and mobile-friendly, for people and Googlebots alike.
In the end, I wasn’t able to achieve this as easily as my lazy bones would have ased if but I had the ability to find an option and it only took like, two days. If you make use of Jetpack Mobile and W3 Total Cache, make certain to allow those User Representative Groups or else Google will certainly make your site feel like it’s still residing in the 2010s (similar to mine up until yesterday).


Tienda WordPress Theme for WooCommerce

I was motivated last week and chose to develop a WordPress theme for WooCommerce It’s the very first time I have actually ever created an eCommerce theme and I chose to construct it around WooCommerce after checking out a few various plugins. I found the documents and includes easy enough to comprehend and wanted to see to it that my consumers would have the ability to set things up without having any difficulty.
For the design, I wanted to keep things basic. But that didn’t suggest that it couldn’t be contemporary, bold and exceptionally lovely at the very same time. The first thing I worked on was a huge header area with a simple parallax-type impact so individuals can showcase an image, text and a call-to-action. It’s a terrific method to present visitors to your inventory or branding and get them going where you desire them to.
For readability, I picked a single font called Raleway with a default size of 16px and a good quantity of breathing room for line height. It’s makes reading things a little much easier on the eyes.
As for functions, it’s a lot simpler to see things live so be sure to go and have a look at the demo.
If you simply desire a quick look, without additional ado I present the …
Tienda WordPress Style for WooCommerce.

It includes a custom-made front page Store Grid template to show your showcased items, newest releases and sales items. There are multiple sidebar choices custom to particular pages within the theme. Just like all my premium styles, you get the advanced color choices, the Google Font style supervisor and the Customized CSS editor. Plus lots of other theme options.
I’ll be submitting a totally free standard variation in the next few days to so everybody can play around with it. For now, if anybody purchases the theme and has any positive criticism, please let me know in the comments below. It’s my very first WordPress theme for WooCommerce so I make sure there are many things that I could improve upon.


Dealing with WordPress and Mediaelement.js

WordPress utilizes Mediaelement.js for its audio and video player and just recently I had to dive in to the code to find out ways to connect with the gamer using jQuery.
Displaying audio with WordPress and Mediaelement.js is simple enough. All you require is the AUDIO shortcode:

This hooks into Mediaelement.js immediately and displays a great audio gamer on the front end.

Because the outputted code uses a special ID included by Mediaelement.js, I assumed I could use that as my jQuery selector. As you can think, that didn’t work.
It spent some time and a great deal of messing around, but I lastly figured out that I needed to bring the audio tag before it was processed by Mediaelement.js. That implied utilizing the HTML Audio tag from the source code as my selector.

$( ‘audio’) [0]
That will select the first audio tag on a page, which for my functions, was all I needed.
The full scope of the demand was to develop a link that avoids ahead to a particular area of the audio file. I had the ability to do this with a few lines of jQuery:

$( ‘a.go-to-time’ ). click( function(e) );.

The HTML required for the above script needed to consist of the DATA characteristic within the anchor tag so that a certain time (in seconds) might be set:.

Go to 60 second mark and play.

In the end, it took me way too long to figure this out, however afterwards, working with WordPress and Mediaelement.js wound up being very simple.
Make certain to take a look at the main website for Mediaelement.js to obtain more information.


Polished and Non Slip Flooring Services

Polished floors by placing a concrete piece for the new floor in the office/studio room. The 4000-psi concrete was offered a tight finish to facilitate polishing and also dyeing.
Brightening, densifying, and sealing all existing concrete floors.
Covering terribly worn concrete floors in the kitchen and entryway with a self-leveling, polishable concrete overlay, and afterwards dyeing and also closing the non-slip floors surface.