Tag: wordpress

What Things To Keep In Mind When Choosing a Theme

by Muhammad Maaz Faisalin Designing, Web, Web Development, WordPressLeave a Comment on What Things To Keep In Mind When Choosing a Theme

When it comes to choosing a theme for their websites, most newcomers are overwhelmed. There are thousands of themes available, both free and paid. Each theme appears to be superior to the others. How do you pick the best WordPress theme?

As a result, I’ve compiled a list of 7 Things to Consider When Choosing a Theme.

1. DO choose a theme that supports the latest version of WordPress:

My #1 recommendation has nothing to do with layout or fonts—all it’s about is usefulness and security. For three very good reasons, the theme you pick must be compatible with the most recent version of WordPress:

  • Your WordPress site’s functionality may not work as you want it to if your theme isn’t fully compatible with the current WP version.
  • Your site’s functionality will suffer if the plugins you use require the most recent version of WordPress and you are unable to upgrade because of your theme.
  • If you choose a theme that does not support newer versions of WordPress, you may decide not to upgrade WordPress, which can result in security holes, data breaches, site defacement, and other problems.
2. Strive for Simplicity:

Many WordPress themes have a variety of colors, complex layouts, spectacular animations, and so on. You may require those items on occasion, but in most circumstances, you will not require all of them. Look for a theme with a design layout that will assist you to achieve your aim. It must look excellent without sacrificing usefulness or simplicity.

 Make certain that the presentation style of the theme is not excessively complex. The goal of web design is to help users discover the information they need while also supporting site owners in achieving their objectives.

3. Responsive is Not Optional Anymore:

Responsive themes automatically alter their layout to fit multiple screen sizes and devices.

Mobile and other handheld devices produce a large amount of online traffic. Depending on the content of your website, this figure might be as high as 50% of the total number of visitors.

Most WordPress themes are already responsive by default. But there are still sellers who are selling fixed-width layouts that are not mobile-friendly at all. Make sure that the theme you are choosing for your website is mobile-friendly.

4. Supported Plugins:

If you are looking for a WordPress theme, you should also consider its compatibility with plugins because WordPress plugins are what give WordPress its true power. You can accomplish anything with your WordPress site thanks to these plugins.

5. Page Builders:

Page builders are WordPress plugins that let you construct page layouts with a drag-and-drop user interface.

 Many premium WordPress themes have pre-installed page builders. Some of these page builders are only available to the theme creator.

Using a page builder like this to construct landing pages might result in a lot of needless code. If you ever change the theme, those pages will need a lot of cleaning up.

You should select themes that have one of the most popular page builder plugins. You may also buy these page builders individually and use them with different themes.

6. SEO Friendliness:

Your theme is critical to the SEO friendliness of your site. A good-looking theme might also produce poorly coded HTML, which can harm your site’s search engine performance.

It may be tough for beginners to evaluate the source code of a theme on their own. Therefore, many premium theme developers will tell you that their sites are SEO-friendly.

7. Ratings and Reviews:

The ratings and reviews left by users are other good measures of a theme’s quality. Customer reviews will appear if the theme is offered on a third-party marketplace.

The rating area for free themes is located directly below the download button. It will display the number of user reviews and ratings. If you click on 5 stars, it will display all the reviewers that rated the theme 5 stars.

Mark parent category menu active on single custom post view in WordPress

by Muhammad Jawaid Shamshadin HTML/CSS, PHP, Web, Web Development, WordPressLeave a Comment on Mark parent category menu active on single custom post view in WordPress

Recently I developed a theme for one of my clients and I had to highlight the menu item of the parent category in the main menu when one of its associated single custom posts was viewed. For that, I had to add an action in my functions.php file for nav_menu_css_class. It returns the ‘active’ class, which WordPress adds to the parent category menu item in the main menu. You can see the code at Gist here or below.

<?php

add_action('nav_menu_css_class', 'add_current_nav_class', 10, 2 );

function add_current_nav_class($classes, $item) {
    // Getting the current post details
    global $post;

    // Getting the post type of the current post
    $current_post_type = get_post_type_object(get_post_type($post->ID));
    $current_post_type_slug = $current_post_type->rewrite['slug'];

    // Getting the URL of the menu item
    $menu_slug = strtolower(trim($item->url));

    // If the menu item URL contains the current post types slug add the current-menu-item class
    if (strpos($menu_slug,$current_post_type_slug) !== false) {
        $classes[] = 'active';
    }

    // Return the corrected set of classes to be added to the menu item
    return $classes;
}
?>

Adding above code in you functions.php file will do the trick.

Click here to read more on WordPress.

Why we moved from OpenShift to Google Cloud

by Muhammad Jawaid Shamshadin Cloud Platform, Google, Linux, OpenShift, RedHat, Web, Web DevelopmentLeave a Comment on Why we moved from OpenShift to Google Cloud

The good old days

When OpenShift was in its version 1 it was great from the customer’s point of view with a low budget. OpenShift v1 had free offers to deploy apps and add a custom domain to it. There was no SSL support but it could be handled via the CloudFlare solution, making the overall solution a great one.

Then there comes OpenShift v2

RedHat then launched OpenShift v2 and added a restriction that gears will be shut down after a certain period of inactivity and also removed the support for custom domain.

That was the time that we had to move to some other cloud platform that could support our apps with low resources and without investing anything. Because all good things in life are free.

Google Cloud to the rescue

So we came across the Google Cloud platform offering and we had $300 credit in a free trial for 6 months. That was more than enough for us to start with. And in fact, they have micro virtual machine instances that are free for life with 30GB storage. That is more than enough for small apps to run for free that are under experiment or don’t have any monetization plans.

So, we migrated several of our apps from OpenShift to Google Cloud and started leveraging free credits provided by Google.

Just this week we consumed all our credit and our trial expired. Our virtual machine instances were shut down, but it didn’t take long before we enabled billing on our project and downgraded our instances to micro ones which are free. That gave us such a relief that our apps are still running although with low resources but it is fine as they are not our revenue-generating apps and are just experiments.

Click here to read more about Google.

Displaying Multiline Title in WordPress

by Muhammad Jawaid Shamshadin HTML/CSS, Technology, Web, Web Development, WordPressLeave a Comment on Displaying Multiline Title in WordPress

In WordPress when the title is written it is usually displayed in a single line on front-end until it is too long to display in one line. But if you want to write the title in multiline and want to line break the title after a certain word how can you do that?

It is pretty simple. Since we know the fact that when the title is displayed it is a heading which is displayed using an HTML tag of course. So, taking benefit of HTML we can just insert an HTML line break element <br/> just after the word in our title where we want the line break. Like this:

“This is my title <br/> with my own line break”

WordPress Multiline Title

This will be displayed in two lines when you publish the post.

Read more about WordPress.

Different color for each menu item in WordPress

by Muhammad Jawaid Shamshadin Designing, Ecommerce, HTML/CSS, Javascript, jQuery, PHP, Technology, Web, Web Development, WooCommerce, WordPressLeave a Comment on Different color for each menu item in WordPress

In a recent project, I got a requirement that each menu item should be highlighted in a different color when visited. The menu items and their required active colors were:

  • Home – Green
  • Portfolio – Blue
  • Team – Yellow
  • Contact – Red

These colors were to be applied only when that page is being visited otherwise color of the menu item should be the default black color.

So, if a user is visiting the home page then the menu item should something like this

home_menu.png

And if the user is visiting the Portfolio page then the menu should be something like this

portoflio_menu.png

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example, a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used the following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining Method

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.
That did the trick and all menu items were in a different color.

Rollover image – Change image on hover/mouse over

by Muhammad Jawaid Shamshadin .Net, Ecommerce, Javascript, jQuery, OpenCart, osCommerce, Ruby, Technology, Web, Web Development, WooCommerce, WordPressLeave a Comment on Rollover image – Change image on hover/mouse over

Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way that if the user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. Here is the trick:

<img src="FIRST IMAGE URL GOES HERE"
onmouseover="this.src='SECOND IMAGE URL GOES HERE'"
onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" />

It is simple as that.

Click here to read more tips.

Override parent shortcodes in your WordPress Child Theme

by Muhammad Jawaid Shamshadin Technology, Web Development, WordPressLeave a Comment on Override parent shortcodes in your WordPress Child Theme

Overriding shortcode defined in WordPress parent theme is pretty easy.

Just use a after_theme_setup section in functions.php of the child theme;

example:

add_action( 'after_setup_theme', 'my_child_theme_setup' );

function my_child_theme_setup() {
   remove_shortcode( 'your_shortcode' );
   add_shortcode( 'your_shortcode', 'my_shortcode_function' );
}

function my_shortcode_function( $atts, $content = null ) {
    extract(shortcode_atts(array(
    ), $atts));
    $out = 'content">'.do_shortcode($content).'</div>';
    return $out;
}

Click here to read more about WordPress.

WooCommerce Per Product Shipping Price Calculation

by Muhammad Jawaid Shamshadin Ecommerce, Web, Web Development, WooCommerceLeave a Comment on WooCommerce Per Product Shipping Price Calculation

If you have different rates depending on the item you will need to set up each one in the ‘Flat Rate‘ shipping method and ensure it is selected on the Product itself.

First, you will need to have a Shipping Class setup:

Go to the menu on the left hand, under Products you will find Shipping Classes.
Give your Shipping Class a name and a description and then hit “Add New Shipping Class”

Once that is done you can go back to the Shipping Setup, Under WooCommerce Settings.

Click on Flat Rate and at the bottom of the screen click on “Add New Rate”
Choose your Shipping Class.
Give it a cost and a handling fee.

Why will you need separate shipping classes?

Imagine you sell small items but just so happen to have one large item you want to sell on your site. You obviously cannot charge the same as you can with the small items.

How To: Open a WordPress Menu Link In New Window or Tab?

by Muhammad Jawaid Shamshadin Technology, Web, Web Development1 Comment on How To: Open a WordPress Menu Link In New Window or Tab?

I have come across multiple WordPress users who aren’t aware that WordPress has a bunch of functions hidden in the “Screen Options” section of multiple Administration Pages. Today I want to show you how to open links in custom menus in a new window or tab (i.e. add a target=”_blank” to link or menu items). Just follow the steps below to unearth the hidden WordPress feature.

Step 1:
Click on Appearance >> Menu in the WordPress dashboard.

Step 2:
Look for the Screen Options drop down menu in the top right corner of your browser window

Step 3:
Under Show advanced menu properties tick the Link Target checkbox.

Step 4:
Add a new link to your custom menu and click on drop down arrow to edit menu items. Voila! You can now decide if your menu item opens in same window or new window.

Click here to read more about WordPress.

Xdebug in WebMatrix

by Muhammad Jawaid Shamshadin .Net, C#, Database, Microsoft, MySQL, Technology, Web, Web Development, WindowsLeave a Comment on Xdebug in WebMatrix

Xdebug is a very popular PHP extension that helps with debugging and profiling of PHP scripts by providing a lot of valuable debug information. Microsoft WebMatrix is a development tool for building web applications. When WebMatrix is used to build or modify a PHP-based web application the debugging tasks can be greatly simplified if Xdebug extension is used. This post explains how to install and use Xdebug extension with WebMatrix.

Step 1: Enable PHP in WebMatrix from the site “Settings” page:

Note that if you installed any of the PHP applications from the Application Gallery then PHP will be automatically enabled.

Step 2: Download the appropriate build of Xdebug extension from downloads page. If your site uses PHP 5.2 then download “5.2 VC6 Non-thread safe (32 bit)”. If your site uses PHP 5.3 then download “5.3 VC9 Non-thread safe (32 bit)”. Use 32 bit build even if your Windows OS is 64 bit.

Step 3: Install the extension by copying the downloaded file to the following locations:

  • For PHP 5.2 on Windows 64 bit:
    C:\Program Files (x86)\IIS Express\PHP\v5.2\ext\
  • For PHP 5.2 on Windows 32 bit:
    C:\Program Files\IIS Express\PHP\v5.2\ext\
  • For PHP 5.3 on Windows 64 bit:
    C:\Program Files (x86)\IIS Express\PHP\v5.3\ext\
  • For PHP 5.3 on Windows 32 bit:
    C:\Program Files\IIS Express\PHP\v5.3\ext\

Step 4: Open the php.ini file located in the PHP installation folder, e.g.
C:\Program Files\IIS Express\PHP\v5.2\php.ini and append the following at the end (make sure that the absolute path is correct for your version of PHP and Windows.):

[xdebug]
zend_extension = C:\Program Files\iis express\PHP\v5.2\ext\php_xdebug-2.1.0-5.2-vc6-nts.dll

Step 5: Configure PHP to display errors by changing these PHP settings in php.ini file:

display_errors = On
error_reporting = E_ALL & ~E_NOTICE

Step 6: Test that extension is enabled and works by either calling a phpinfo() function from a script or by running a buggy script:

The Xdebug extension provides a lot of useful features that help with debugging of PHP applications. You can learn more about them from the Xdebug documentation. For example you can use it to profile a PHP application. Just change the php.ini file as shown below and then make a request to a PHP script:

[xdebug]
zend_extension = C:\Program Files\iis express\PHP\v5.2\ext\php_xdebug-2.1.0-5.2-vc6-nts.dll
xdebug.profiler_enable = On
xdebug.profiler_output_dir = C:\Windows\temp

The profile log will be saved into the specified directory and will have a name cachegrind.out.* Use WinCacheGrind to open and analyze it: