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.
Continue reading “WordPress sidebars fetching on other cms with wordpress xml rpc”

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; }

Unique Page Sidebars Is not working

While working on wordpress to develop any website you may need to create dynamic sidebar for different pages, custom post type. You can use Unique Page Sidebar wordpress plugins from wordpress plugins repository for free.

It works for perfectly on default wordpress single page also on different archive pages.
For custom post type if you are using this plugins like you created a custom post type page template with custom query you need to make sure that you reset your query at the end of post looping.

If some how Unique Page Sidebars is not working on your custom post type template page then you need to make sure that you used wordpress reset query like below.

Upload featured image on custom post from wordpress front-end

When you are working with wordpress custom post type and you need to allow user can submit new posts where On each post you need to upload photo of the post also that can be a featured image then you need to follow below codes to upload attachmends and to make it featured.

//Just uploading photo or attachments
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
require_once(ABSPATH . "wp-admin" . '/includes/file.php');
require_once(ABSPATH . "wp-admin" . '/includes/media.php');


//$file_handler = 'upload_attachment' //Form attachment Field name.
$attach_id = media_handle_upload( $file_handler, $post_id );


//making it featured!
set_post_thumbnail($post_ID, $attach_id );
or
update_post_meta($post_id,'_thumbnail_id',$attach_id);