Introduction

If you are living in a non-english speaking country like me, or you create a website for a customer in a country like that you probably need to translate the website to the country-specific language. When you are using the content management system WordPress for example, maybe there are some translation options shipped with the theme you are using. If there are some missing or even not available, there is a simple possibility to translate certain strings. I recently had this case with the Blog overview page and the Posts page. There you have strings like “Author”, “Post Comment”, “Log Out” and so on. WordPress Translate Strings Functions.php

Edit functions.php for Translations

In order to use that method, I strongly recommend you to create a child theme in WordPress, thus you are safe to update everything. Otherwise, when you are working without a child theme, you might lose your changes after an theme update if the file gets overwritten. For more information about WordPress child themes I suggest you to check out the documentation at WordPress.org

The code itself is very simple:

1. Add a filter
2. Create the translation function
3. Inside the translation function, you use str_ireplace with the not-translated input and the translated output for every string you need
4. You return the translated string

add_filter('gettext', 'translate_my_text' );
function translate_my_text($translated) {
    $translated = str_ireplace('Leave a comment on: “%s”', 'Kommentar zu “%s” verfassen', $translated);
    $translated = str_ireplace('Leave a Comment', 'Kommentar verfassen', $translated);
    return $translated;
}

The post WordPress: Translate Strings with functions.php appeared first on HackBuddies.

But let’s stay for now at the function to modify the “Price on Inquiry” text. In order to keep your changes when updating your theme, I recommend you to create a child theme in case you do not have one yet. It is a very simple process and you can look it up here:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

At the child theme you can include this code snippet in your functions.php file, which you may need to create in case you just created your new child theme. The code snippet itself is very simple, if the product price is equal to 0 or ” it will return a line of HTML which you can customize as you need it. I found the necessary information at the following site:
https://businessbloomer.com/

// Inquiry link if no price available

function add_inquiry_link_instead_price( $price, $product ) {

    if ( '' === $product->get_price() || 0 == $product->get_price() ) {

        return '<span class="price_on_inquiry">Price on Inquiry</span>';

    }

    return $price;

}

add_filter( 'woocommerce_get_price_html', 'add_inquiry_link_instead_price', 100, 2 );

The post WooCommerce: Show Custom Text for Products with no Price appeared first on HackBuddies.

• Dashboard
• Orders
• Downloads
• Addresses
• Account Details
• Logout

For our modifications we just need to edit the functions.php file of your child theme. For my webshop, I wanted to rename two menu entries and hide one completely.

Remove Account Menu Item

Basically, the code to modify the menu items is very simple. Here, I just added a filter to remove the “Downloads” tab because I had nothing to download in this shop. The function itself simply unsets the specified item and returns the other items.

add_filter( 'woocommerce_account_menu_items', 'remove_downloads_my_account', 999 );
function remove_downloads_my_account( $items ) {
unset($items['downloads']);
return $items;
}

add_filter( 'woocommerce_account_menu_items', 'rename_address_my_account', 999 );
function rename_address_my_account( $items ) {
$items['edit-address'] = '<Insert your custom text here>';
return $items;
}

add_filter( 'woocommerce_account_menu_items', 'rename_edit_my_account', 999 );
function rename_edit_my_account( $items ) {
$items['edit-account'] = '<Insert your custom text here>';
return $items;
}

The post Adapt WooCommerce Customer Menu at My Account page appeared first on HackBuddies.

At first you need to create an account obviously. Just visit the website: CloudFlare
After creating your personal account, you can start to configure CloudFlare for your website. Simply enter your URL and then you will be guided through the configuration process.

One of the first setups during setup is to change the nameservers at your web hosting provider. So, you need to log on to the management portal of your web hosting, go to your domain settings / DNS settings and adapt the nameservers to the CloudFlare nameservers displayed. From this time on, all your DNS records will be maintained at CloudFlare and not at your hosting provider anymore, keep this in mind. It can take up to 24 hours until the changes are applied, so do not expect that to work instantly.

If you are looking for a new reliable and performant webhost, I can totally recommend you Bluehost #ad

Change your nameservers

After you hit the button “Done, check nameservers”, you will get the updated status of “Pending Nameserver Update”, which will switch to “Active” as soon as the nameserver update is applied.

Review DNS records

The next step is to review your existing DNS records which were imported from your hosting provider to CloudFlare. In my case, there were:

• A records
• CNAME records
• MX records
• TXT records

If you are unaware of DNS records and their types you can check out my other post DNS Records
After you reviewed and compared them with the existing ones at your web host you can confirm that import and continue the setup.

Basically, that’s it! The initial setup Of CloudFlare CDN is finished. Now is the time to wait for your pending nameserver update at the domain registrar. You can check the CloudFlare portal for the current status. As soon as this status is “Active”, you can check out the different functions there. Keep in mind that the free version is limited but it is a great way to test the tool in general and get an overview.

You can also perform a speed test there. In my case (without any customizations and with only free version of CloudFlare), the speed could be improved by 29%:

The post Setup of CloudFlare Content Delivery Network (CDN) for your WordPress Website appeared first on HackBuddies.

I found the documentation at WooCommerce directly:
https://docs.woocommerce.com/document/configuring-caching-plugins/
They give the following instructions:
1.) Exclude these pages from caching in the Page Cache Settings:

• Cart
• My Account
• Checkout

2.) Ensure you add mfunc to the Ignored comment stems option in the Minify settings:

With this configuration I still encountered problems at the Checkout process. So I also included the shop* page at the exceptions: (keep in mind that this was a German webshop, so the permalinks are a bit different)

In the Database Cache settings, the _wc_session_ was added to the Ignored Query Stems:

Finally, with all these settings I looked up from different sources, everything in the WooCommerce shop is running fine with activated W3 Total Cache plugin and the general speed of the system got improved by different technologies like Page Caching, Minifying and Browser Caching.

The post WooCommerce: Configuration of W3 Total Cache Plugin appeared first on HackBuddies.

Web Page Performance Test for hackbuddies.com

This week I tested my website to get an overview of the performance and I wanted to share the results with you so you can also get a quick overview of the tool and possibilites. In this test I did not define any advanced options, just the location Frankfurt in Europe as a location. Let’s check the results:So, on the top you will get a first overview with the grades. The main categories here are:

• Time to First Byte (TTFB)
  This is basically the server response time (back-end side)
• Keep-Alive Enabled
  HTTP persistent connections are about sending concurrent requests over a single connection
• Compress Transfer
  gzip compression can be used for HTTP requests and is able to reduce the size of the HTTP responses
• Compress Images
  Checks images which can be compressed without losing image quality
• Cache Static Content
  Caching details are transferred in the header of the response from the server. With the help of cached static content you can save resources and requests.
• Effective Use of CDN (Content Delivery Network)
  A CDN is a distributed network of proxies (data centers) and offers high availablity as well as performance for globally distributed end users

Waterfall View/Diagram

In the Waterfall View you can easily determine loaded files which take a lot of time and are therefore slowing down your page speed significantly. You will find images, CSS and JS files as well as fonts (e.g. in format .woff2). Of course these files can also be loaded from external sources like Google Fonts.
In the diagram you can differentiate between waiting times, DNS resolution, connection, SSL encryption and so on:

Request Details

You can get an even more detailed overview by navigating to the Request Details by simply scrolling down a bit at the Waterfall Diagram. You will see the start time of the request, the time for the DNS lookup, the Time To First Byte (interesting for external sites), the HTTP status codes and much more:

Performance Review

Last but not least I want to tell you a little bit about the Performance Review. Here are all files listed and you will see all grade evaluations for each file which is really really useful. As you can see in the screenshot, I haven’t configured a Content Delivery Network (CDN) yet for my website and therefore it is just available at external sources like Google Analytics or Fonts. But I am currently setting up CloudFlare and will write an article about it if you are interested.

Performance Details

After scrolling down you will get a summary for the assessment of your grades. You can easily detect non-progressive JPEGS, non-compressed images or non-cached content. In this way you are able to easily determine and fix these things which will improve your website speed – believe me 🙂

Maybe you are now also interested in executing a Website Performance Test WebPageTest.org and want to share your results here.

The post Analyze the Performance of your Website with WebPageTest.org appeared first on HackBuddies.

Do you know what favicons and app icons are? On the one hand, favicons are the little icons which are shown in every browser tab where a website is opened and a favion is set up properly. Here is an example:

They are truly important because they are also visible at bookmarks, thus the website is easier to identify. On the other hand, app icons are shown at mobile devices like iOS and Android if you launch an application. 

Given that you already have a logo in .jpg or .png format, just use this online favicon generator. This is a very simple and convenient way to generate all necessary little icons:
https://www.favicon-generator.org/

Simply upload your logo in .jpg or .png format. After that, you can choose between only generating the 16×16 favicon or generating icons for all devices. The image dimensions can also be maintained.

After pressing the “Create Favicon” button everything gets generated and you can download the .zip file containing your icons. You can use these images by uploading it to your web application like WordPress. Mostly every theme offers the option to upload those icons in the theme options.

The post Creating favicons and app icons for your website appeared first on HackBuddies.

Do you want to bring some life into your images with a simple hover effect? All you need: 10 lines of CSS code
Simply add the desired class name to your images and insert the following into your custom CSS. The class name needs to get modified of course.

.myHoverImageClass {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.myHoverImageClass:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

You can also customize the values of the transitions and transformations to adapt the effect perfectly to your needs.
Try it here:

The post Create Image Hover Zoom Effect with simple CSS appeared first on HackBuddies.