PortfolioRx Version 2.0.0 Release Changelog

We are happy to announce you that PortfolioRx version 2.0.0 has been released with bellow listed change-log. The major changes on this update was Core Framework upgrade to TitanFramework, as a core contributor of this framework I’ve been contributing for last couple of years and finally finding that framework too much user / developer friendly, that’s why now a days we are using it as the core of our each theme.

To keep your website modern and fresh looking you are requested to update your copy of PortfolioRx and share your feedback with us!

Version 2.0.0:

  • Improved – Core framework replaced with TitanFramework http://www.titanframework.net/
  • Added – Portfolio listing added fluid UI for small to large screen.
  • Removed – Portfolio item badge.
  • Added – WordPress custom header and background support added.
  • Added – Theme Customizer based live styling.
  • Improved – Overlay loading conflict fix.
  • Improved – Overlay container size reduced to fit maximum 1200px from full width.
  • Improved – Other CSS, JS and Responsive Features.
  • Improved – All bundled shortcodes improved with new field and features.
  • Removed – Custom image and Video widget removed as latest WordPress has these widgets by default.
  • Added – Child theme support so that theme overwrite can be easier then before.

Listed as a Core Contributor of Titan Framework

Yes got my updates approved on Titan Framework – WordPress Options Framework. Surely I was looking for a best developer friendly WordPress plugin and theme framework for my premium WordPress theme and plugins development which all were targeted for https://envato.com/ like popular marketplaces. and I’ve found this one as the mostly matching for my needs. While using this framework I’ve found a couple of usability issues and after fine tuning them (around 6 different commits) submitted pull request and got approved!

Yes this one is my first contribution for a well known and popular library on my dev community.  Though I’ve a couple of other contribution on my github profile 🙂

It’s feeling awesome when you see your photo published on any well known website related to your career like this one 🙂  Let’s find me from this lists of Amazing Contributors.

Auto Fill Input Fields for Unique Page Sidebars

When you are developing a website with WordPress and support for Unique Page Sidebars WordPress Plugins then you may noticed when add a sidebar all the widget parameters inputs are empty. Something like the below image

default-inputs

Here with this code example you can auto fill the widget parameters.

Step 1: include a javascript for WordPress admin interface.

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'admin-custom-js', get_template_directory_uri() . '/resources/js/custom-admin.js', array( 'jquery' ), '1.2', true );

Step 2: Write below codes on your custom-admin.js

/*
---------------------------------------------------------------------------------------
Auto fill input values for WordPress Unique Page Sidebars when creating a synamic sidebar with default values
---------------------------------------------------------------------------------------
*/

jQuery(document).ready( function($) {

    //Finding all inputs from unique page sidebars when creating a sidebar
    $("input[id^=ups_sidebars]").each( function( k, v ) {

        //Finding current input fields id
        id = $( this ).attr( 'id' );

        //Check if it has a default value already
        if ( $( this ).val() == '' ) {

            //Matching if it is the before_title field
            before_title = id.match(/\bbefore_title/);
            if ( before_title ) {
            $( this ).val( '<h3 class="widget-title">' );
            }

            //Matching if it is the after_title field
            after_title = id.match(/\bafter_title/);
            if ( after_title ) {
            $( this ).val( '</h3>' );
            }

            //Matching if it is the before_widget field
            before_widget = id.match(/\bbefore_widget/);
            if ( before_widget ) {
            $( this ).val( '<div id="%1$s" class="widget %2$s">' );
            }

            //Matching if it is the after_widget field
            after_widget = id.match(/\bafter_widget/);
            if ( after_widget ) {
            $( this ).val( '</div>' );
            }

        }

    });

});

That’s all if everything goes fine you will see a interface as the below image shown when adding a sidebar.
input-pre-values

Note: Don’t forget to widget parameters as your need on javascript what you are using when registering a sidebar for your theme.

Removing WordPress menu div tag and keeping ul [Code Snippet]

When you are working with WordPress menu then sometimes you may noticed if no menu is defined it is putting a div wrapper just above the url tag. Here is how you can remove that div and keep ul as it as.

wp_nav_menu( 
    array( 
        'theme_location'  => '', //Just keep this as empty
        'container'       => '', //Keep this one also as empty
        'menu_class'      => 'menu',
        'menu_id'         => 'primary-menu',
        'depth' => '2',
    )
);

Checking if a menu published in WordPress

$has_enabled_main_menu = false; 
$menu_location = 'primary'; //Going to check if this menu location (primary) has a menu as defined
$menu_locations = get_nav_menu_locations();
$menu_object = ( isset( $menu_locations[ $menu_location ] ) ? wp_get_nav_menu_object( $menu_locations[ $menu_location ] ) : null );
if( $menu_object ) {
    $has_enabled_main_menu = true;
}

Finding all parent pages in WodPress [Code Snippet]

Sometimes we needs to find all parent pages of current page in WordPress. It is useful to create a breadcrumb. Here is a example code snippet to find all parent pages.

<ul class="page-breadcrumbs">
    <li><a href="<?php echo home_url(); ?>"><?php _e( 'Home', 'mondira' ) ?></a></li>
    <?php
    global $post;
    $parent_id = $post->post_parent;
    $breadcrumbs = array();
    while ( $parent_id ) {
        $page = get_page( $parent_id );
        $breadcrumbs[] = '<li><a href="' . get_permalink( $page->ID ) . '">' . get_the_title( $page->ID ) . '</a></li>';
        $parent_id = $page->post_parent;
    }
    $breadcrumbs = array_reverse( $breadcrumbs );
    foreach ( $breadcrumbs as $crumb ) echo $crumb;
    ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
</ul>

WordPress sidebars fetching on other cms with wordpress xml rpc

Recently I worked on a site which is using wordpress as it’s cms and creloaded as it’s web shop. So the wordpress was top of the shopping cart and then the shopping cart as webshop. So basically I had to develop the site using wordpress and then had to install that creloaded inside woordpress installation.

For main site wordpress has it’s header (with navigation), footer (with navigation and other contents), sidebar with widgets etc. So when I am visiting the web shop with creloaded I was required to show the same layouts and design. For that I had to use wp xmlrpc to fetch those common features into creloaded system.

XML-RPC functionality is turned on by default since WordPress 3.5. So anyone can use it who is using wp 3.5 or greater without activating xml-rpc via wordpress admin!

All of this can be done with below written 3 steps.
1. Writing XML Client Class
2. Using XML Client
3. Defining XML Server methods in wp functions.php

Note: Here all the things are not well documented, Because I am assuming you are enough expert on wp and did some google and finally here to see a code example of wp xml rpc implementations.
Read More

z-index of dropdown menu vs iframe (youtube) video issue

When you are using iframe to display any video, for example if you are using youtube iframe video and on your site it has a dropdown menu and your dropdown memu is showing behind the iframe video you can make it top of iframe video with below written jquery code.

(function ($) {
    $ = jQuery;
    $(function () {
        $video = $("#parentocontainer> iframe");
        $srcVal = $video.attr('src');
        appendedVal = $srcVal + "?wmode=opaque";
        //or
        //appendedVal = $srcVal + "&wmode=opaque";
        $video.attr('src',appendedVal);
    });
 })(jQuery);

wordpress 404 redirect to other url

If you are using wordpress as blog of your website blog and you are using other cms as your main website now you want any 404 of wordpress blog will redirect to that other cms 404 page then you use below code example to redirect your wordpress blog 404 page.

add_action('wp','determine_if_fourzerofour_page');
function determine_if_fourzerofour_page(&$arr){
    global $wp_query;    
    if($wp_query->is_404){        
        $url_redirect = 'http://www.exampledomain.com/404.php';        
        header('Location: '.$url_redirect);
        die;
    }
}

Contact form 7 nice css3 styles

If you are using wordpress and for contact form Contact us 7 plugins then you can use below css3 codes to make that contact form 7 css looks nicer then default one!

/*Contact Form 7 CSS Support*/
span.wpcf7-not-valid-tip{display: none !important; }
div.wpcf7 .wpcf7-not-valid{ border: 1px solid #F00; margin: 0; }
div.wpcf7-validation-errors{ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; padding: 10px; color: #c4690e; background: #fffdf3; text-align: center; border: 1px solid #e6bf4a; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px;}
div.wpcf7 .wpcf7-not-valid { box-shadow: 0 0 6px rgba(255,0,0,0.4); } 
.your-message textarea{ width:100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ }
div.wpcf7-mail-sent-ok {  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; color: #5f9025; background: #ebf6e0; border: 1px solid #b3dc82; padding: 10px; text-align: center;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; }
div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked {  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; padding: 10px; background: #ffe9e9; color: #d04544; border: 1px solid #e7a9a9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; text-align: center;}
.wpcf7-form-control-wrap input[type=email]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap textarea:focus{ border:1px solid #CCC; box-shadow:none; border-color: rgba(82, 168, 236, 0.8); outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.wpcf7-form-control-wrap input[type=email]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap textarea:focus,.wpcf7-not-valid, div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked { transition : border 1000ms ease-out;  -webkit-transition : border 1000ms ease-out;  -moz-transition : border 1000ms ease-out; -o-transition : border 1000ms ease-out; }