Several months ago, PLC Construction Company reached out to the team in search of a brand new digital presence. PLC Construction is the name behind many of the safest and most profitable upstream and midstream facilities in the oil and gas industry. Serving clients worldwide since 1993, they have provided clients with quality solutions to their most complex construction, engineering, design, and integration challenges. Today PLC is a nationally-recognized leader in the oil and gas industry for two things: the team’s vast experience and dedication to client success.

Here are some of the theme highlights of the new digital presence for PLC:

• Brand new 2026 custom web design and aesthetics
• WordPress CMS and Elementor Page Builder
• Strategic Project Resumes section with user filters to showcase PLC’s latest state of the art work on multimillion dollar projects across the globe
• Full SEO architecture including high level IA, 301 redirect strategy and schema
• Full site speed optimization and ongoing support

The post New PLC Construction Website Launches Using Bavotasan and Bandicoot Technology appeared first on bavotasan.com.

With a few delays pushing the launch date for the new Themes by Bavotasan down the road a little bit, our team has decided to release one of our brand new themes today: Launchstream.

Launchstream is a software theme built to help you start pre-selling your software app, mobile app, or SaaS service in less than 10 minutes.

Built on the powerful Live Composer Page Builder, the Launchstream theme allows for easy drag-and-drop editing capabilities without compromising site speed and clean SEO architecture.

Here are some of the theme highlights:

• Brand new 2019 Software theme design
• Drag-and-drop website and page builder
• Create unlimited landing pages and funnel pages
• Home page, team page, features with screenshots and more
• Header, footer builder makes menu and global page edits a snap
• Royalty-free stock images
• Built-in Font Awesome icon sets for use anywhere on the site

The post Introducing: Launchstream appeared first on bavotasan.com.

When WordPress 4.7 was released, an option to use a header video instead of an image was added to the Customizer. Including the feature in a theme like Arcade seemed like a good idea but took me a while to finally get right.

Video Header Code

Including support for a video header is straightforward enough.

add_theme_support( 'custom-header', array(
 'video' => true,
) );

If you already declare support for a custom header you can just add 'video' => true, to the argument array.

In order for the new header video to appear in your theme, you need to place the the_custom_header_markup() function in the right spot. To get it working in Arcade took some custom CSS and a few changes to the core PHP code but I managed to figure it all out.

Header Media Section

With that in place, the Header Image section of the Customizer will now become the Header Media section, and a button to select/upload a video or include a YouTube link will appear.

Conclusion

If you already have a license for Arcade, be sure to update your copy to the latest release to play around with the new Header Video option. If not, head on over to Themes by bavotasan.com and purchase your copy today.

For more info on the Header Video functions check out the info page on Make WordPress Code.

The post New Video Header Option in Arcade appeared first on bavotasan.com.

https://codex.wordpress.org/Function_Reference/wp_remote_get

After you’ve used the function, the information it returns also has to be formatted in a certain way or you won’t be able to do anything with it.

wp_remote_get() Basics

Let’s start with a simple function:

$response = wp_remote_get( 'http://yoursite.com/api/somecallhere' );
if ( is_wp_error( $response ) ) {
   echo 'There be errors, yo!';
} else {
   echo 'It worked!';
}

With this function, we’re using wp_remote_get() to retrieve our URL. If there’s an error, we display the first sentence. If it worked, we display the second sentence.

Not much value in that so we need a few more lines of code.

What Comes Next?

Once we retrieve data from the URL, we need to format it correctly.

$response = wp_remote_get( 'http://yoursite.com/api/somecallhere' );
if ( is_wp_error( $response ) ) {
   echo 'There be errors, yo!';
} else {
   $body = wp_remote_retrieve_body( $response );
   $data = json_decode( $body );
}

if ( $data->Data ) {
   echo 'We got data, yo!';
}

After we retrieve our data, we use wp_remote_retrieve_body() and json_decode() to process it and get what we need.

We can even go one step further and display our data.

$response = wp_remote_get( 'http://yoursite.com/api/somecallhere' );
if ( is_wp_error( $response ) ) {
   echo 'There be errors, yo!';
} else {
   $body = wp_remote_retrieve_body( $response );
   $data = json_decode( $body );
}

if ( $data->Data ) {
   print_r( $data->Data );
}

This we’ll display the array of data that was returned.

Conclussion

When you need to hook into an API or retrieve data from a URL, wp_remote_get() is the function you need. Just remember that you’ll also have to take a few more steps in order to get to the actual data you want.

If you have any questions or feedback on this post, please use the comments below to start a discussion.

The post Simple Function Using wp_remote_get() appeared first on bavotasan.com.

Living in Montreal, I often have to create multi-lingual websites for clients. That means finding the right plugin for the job. I don’t always use WPML, but it’s one of my go-to plugins when it comes to creating websites with multiple languages.

A recent client requested that their site display a different logo for each language. In order to make this happen, I had to code a simple conditional statement using PHP. But I needed to know which language was selected to display the right logo.

I wasn’t sure if WPML stored the current language selection so I had to do a bit of research. Thankfully, I discovered it did.

The Language Code

When a visitor selects a language, a two-letter language code is stored in the constant ICL_LANGUAGE_CODE. Using this and a little PHP, I wrote the following block of code to give my client what they wanted.

<?php if ( defined( 'ICL_LANGUAGE_CODE' ) && 'fr' == ICL_LANGUAGE_CODE ) { // If the language is French ?>
	<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/fr_logo.png" class="site-logo" alt="" />
<?php } elseif( defined( 'ICL_LANGUAGE_CODE' ) && 'it' == ICL_LANGUAGE_CODE ) { // If the language is Italian ?>
	<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/it_logo.png" class="site-logo" alt="" />
<?php } else { // If the language is English, the default ?>
	<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/en_logo.png" class="site-logo" alt="" />
<?php } ?>

I placed that in header.php and used the class site-logo to style the CSS to match the client’s requested design.

Is there a better way?

If you take a closer look at the code above, you’ll notice that all the filenames have the language code as a prefix. That means you can simplify things even more which is always a better approach when it comes to coding.

<?php $lang_prefix = ( defined( 'ICL_LANGUAGE_CODE' ) ) ? ICL_LANGUAGE_CODE : 'en'; ?>
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/<?php echo esc_attr( $lang_prefix ); ?>_logo.png" class="site-logo" alt="" />

Using the WPML plugin’s ICL_LANGUAGE_CODE constant lets you create all kinds of custom code specific to each language. Displaying different logos is just the tip of the iceberg.

NOTE: Konrad from WPML mentioned in a comment below a better way to get the current language code. It’s probably a good idea to use that one instead.

The post Displaying Different Logos with WPML appeared first on bavotasan.com.

For some reason, there are multiple functions in WordPress that do similar things but require different approaches. On the surface, you’d think the admin_body_class function would work the same as the body_class function, but you’d be wrong.

When you modify the body_class function, you hook into the filter like this:

add_filter( 'body_class', 'category_id_class' );
// add category nicenames in body and post class
function category_id_class( $classes ) {
	global $post;
	foreach ( ( get_the_category( $post->ID ) ) as $category ) {
		$classes[] = $category->category_nicename;
	}
	return $classes;
}

If you break that down, you’ll notice that adding a new class name requires extending the $classes array. Straightforward enough, though for some reason when you attempt to work with the admin_body_class function, this approach causes the following error:

Fatal error: [] operator not supported for strings

That’s because it uses a string instead of an array.

As long as your aware of this difference, working with the admin_body_class function is just as straightforward.

add_filter( 'admin_body_class', 'custom_admin_body_class' );
function custom_admin_body_class( $classes ) {
        $classes .= 'custom-class';

	return $classes;
}

I’ve found the above filter useful when I needed to customize the admin after I activated a plugin. With a simple check, the function added a class name to the admin body tag which made it easier for me to use CSS on the page.

Conclusion

The difference is slight but important to understand how to use the admin_body_class function correctly. Then you can easily customize your admin with JavaScript or CSS using that new class name.

You can read a little more about the function in the WordPress codex.

The post Working with the WordPress admin_body_class function appeared first on bavotasan.com.

First off, let’s discuss the software I use to translate my themes.

Working with PoEdit

PoEdit is free, though there is a premium version you could buy. I opted for the premium version since I use it all the time and those extra features do really come in handy.

Once you load up a POT file, you will see all the translatable strings. Select your language and translate away. Once the strings have all been translated, click save and PoEdit will create the PO and MO theme translation files you need with the appropriate filenames.

Filenames are important and will help WordPress know which language file to use. You can read more about naming conventions here: https://make.wordpress.org/polyglots/teams/

You can see on that page that a Canadian English language file should be named en_CA.po and a French language file should be named fr_FR.po. Look through the list to see the correct name for your language.

Switching WordPress into your language

This step of the process has become easier ever since the setting option was added to the General admin page. Before you had to edit wp-config.php but now you can just select your language from the drop down list.

Adding your theme translation file to the right folder

This is the one step that I actually didn’t really know much about. I thought you just had to add the new theme translation file to the theme’s languages folder. Though, this creates an issue if you ever update, since that folder is replaced and the custom language files are deleted.

The correct and safe way to store a language file is to create a languages folder in your wp-content folder. The hierarchy should look like this:

- wp-content
- - languages

Since you’re creating a translation for a theme, you need one more folder.

- wp-content
- - languages
- - - themes

We’re almost there. The languages folder we’re going to use is now outside of the theme folder, so we need to let WordPress know which files link to which themes. That means we have to change up the naming convention a little to connect things.

If you’re creating a French language file for the theme Arcade, this is how the folder/file setup should look:

- wp-content
- - languages
- - - themes
- - - - arcade-fr_FR.po
- - - - arcade-fr_FR.mo

You need to add ‘arcade-‘ to the name of the language file. If you were using Magazine Premium, you would have to add ‘magazine-premium-‘ to the file name.

Here’s another way to see the hierarchy:

/wp-content/languages/themes/arcade-fr_FR.po
/wp-content/languages/themes/arcade-fr_FR.mo

OR

/wp-content/languages/themes/magazine-premium-fr_FR.po
/wp-content/languages/themes/magazine-premium-fr_FR.mo

There’s the rub

It takes a few extra steps, but setting up a new languages folder this way will keep your theme translation files safe when you update.

If you’ve create language files for any of my themes, feel free to link to them in the comments below so everyone can benefit from your hard work.

The post Creating a New Language File for a Theme Translation appeared first on bavotasan.com.

When you upload an image to WordPress it’s processed and compressed to 90% of its original JPEG quality. This is a default setting that’s in place to automatically optimize every image, which in turn can hopefully speed up your site’s loading time.

It’s a nice enough little feature, but the fact that it happens behind the scenes without anyone really knowing it’s going on can cause some users a lot of grief. Especially photographers who see a drop in JPEG quality every time they upload an image.

There’s no option 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!

As with most features in WordPress, there’s a filter or action in place that we can hook into which will allow us to modify and customize certain functions. For this mod, the filter we need to hook into is called jpeg_quality.

<?php
add_filter( 'jpeg_quality', 'bavotasan_custom_jpeg_quality' );
function bavotasan_custom_jpeg_quality( $quality ) { 
   return 100; 
}
?>

All the filter requires is a quality setting between 1 and 100, with 100 being no compression whatsoever.

You can read a bit about the jpeg_quality filter and see the original function by checking out the code reference page.

Needs More Compression

If you’re someone who believes in the full extent of optimizing your images, then compressing them even more might be the way to go. It’s an easy enough change since all you need to do is decrease the JPEG quality to a setting below the default of 90.

<?php
add_filter( 'jpeg_quality', 'bavotasan_custom_jpeg_quality' );
function bavotasan_custom_jpeg_quality( $quality ) { 
   return 75; 
}
?>

You can always play around with the number and test out the results. You might discover a perfect balance between smaller file size and optimal image quality.

Make it easier on yourself and install the Regenerate Thumbnails plugin so you don’t have to re-upload your images again and again while trying out different quality settings.

If you have any suggestions or comments, please feel free to use the form below to start a discussion.

Featured image provided by Death to the Stock Photo.

The post Increase JPEG Quality in WordPress appeared first on bavotasan.com.

When you load up the latest post on a properly designed WordPress site, you should see a link for the previous post somewhere on the page. It usually appears right after the main content. On older posts, you’ll also find a link pointing to 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 displayed using the following function:

<?php previous_post_link( '%link', __( '&larr; %title', 'text-domain' ) ); ?>

If you take a look at the previous_post_link() page in the WordPress codex you can see the available parameters. If you use the code example above, the %title placeholder will be replaced with the previous post’s title.

Since we want to add more details to the previous post link, let’s take a look at get_previous_post() instead. That function retrieves all of the details for the previous post which will give us the ability to customize things however we want.

Gathering Previous Post Link Details

Here’s a small function that will load the extra details we’re going to use.

if ( $prev = get_previous_post() ) {
   $prev_title = $prev->post_title;
   $prev_ex_con = ( $prev->post_excerpt ) ? $prev->post_excerpt : strip_shortcodes( $prev->post_content );
   $prev_text = wp_trim_words( apply_filters( 'the_excerpt', $prev_ex_con ), 15 );
   $prev_time_author = sprintf( __( '%s ago - by %s', 'byline' ), human_time_diff( get_the_time( 'U', $prev->ID ), current_time( 'timestamp' ) ), get_the_author( $prev->ID ) )
}

In the above code, we set up a few variables with the previous post’s title, excerpt, time and author. There’s a word limit set for the excerpt using wp_trim_words(). If you want to increase/decrease this value, change 15 to whatever you want.

Adding the HTML

With those variables set, we can now use some HTML to display all the info for our previous post.

<div class="previous">
   <a href="<?php echo esc_url( get_permalink( $prev->ID ) ); ?>">
      <span class="icon">&rarr;</span>
      <strong><?php echo $prev_title; ?></strong>
      <br />
      <?php echo $prev_text; ?>
      <br />
      <em><?php echo $prev_time_author; ?></em>
   </a>
</div>

Styling It Up

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 {
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   font-size: 24px;
   position: absolute;
   left: 0;
   top: 50%;
}

.previous strong {
   font-size: 18px;
}

.previous em {
   font-size: 12px; 
}

I’ve also added a black background and white text to the example image below to make it stand out form the page.

Even though the example above is for the previous post link, the next post link can be displayed and styled in a similar way using get_next_post().

If you have a suggestion or comment, please use the form below.

Featured image provided by Gratisography.

The post Add More Details to the Previous Post Link appeared first on bavotasan.com.

This is just a quick little snippet to display a word count on the single post page in WordPress. Since it requires being placed within the loop, you can actually add it to any template file that includes a loop, such as archive.php or index.php.

The example below is for my premium Destin theme, which also has a basic version available for free through WordPress.org.

Since we’re editing the theme’s core files, I suggest first creating a child theme. This ensures that the changes stay intact when you update the theme in the future.

Check out my tutorial Creating a Child Theme in WordPress for guidance.

The Basic Function

Once you’ve created your child theme, include this short block of code in its functions.php file:

function bavotasan_word_count() {
   return sprintf(
      __( '%s words', 'text-domain' ),
      str_word_count( strip_tags( get_post_field( 'post_content', get_the_ID() ) ) )
   );
}

str_word_count is a simple PHP function that counts the number of words inside string. All we’re doing is loading up the post’s content as the string after we’ve stripped out all HTML tags. Otherwise, those tags would be counted as words and mess up the total.

With that code in place, we can add bavotasan_word_count() to the theme’s content.php file.

Displaying the Word Count

We want the word count to appear on the left with the post’s meta data, so include the new function within this block of code:

<div class="col-md-3 entry-meta">
   <p><i class="fa fa-bookmark"></i> <?php _e( 'Posted in ', 'destin' ); the_category( ', ' ); ?></p>

   <?php if ( comments_open() ) { ?>
   <p><i class="fa fa-comments"></i> <?php comments_popup_link( __( '0 Comments', 'destin' ), __( '1 Comment', 'destin' ), __( '% Comments', 'destin' ), '', '' ); ?></p>
   <?php } ?>
</div>

Here’s the new function:

<p><?php echo bavotasan_word_count(); ?></p>

Add it all together:

<div class="col-md-3 entry-meta">
   <p><i class="fa fa-bookmark"></i> <?php _e( 'Posted in ', 'destin' ); the_category( ', ' ); ?></p>
   <p><?php echo bavotasan_word_count(); ?></p>

   <?php if ( comments_open() ) { ?>
   <p><i class="fa fa-comments"></i> <?php comments_popup_link( __( '0 Comments', 'destin' ), __( '1 Comment', 'destin' ), __( '% Comments', 'destin' ), '', '' ); ?></p>
   <?php } ?>
</div>

Check out the image below to see what it’ll look like:

It’s an easy enough mod that allows you to include a bit more meta data for each of your posts.

If you have any thoughts or would like to add to this tutorial, please use the comment section below.

Featured image provided by Gratisography.

The post Add Word Count to Single Posts in WordPress appeared first on bavotasan.com.