Ayanize https://ayanize.com Get Ayanized with Awesome Plugins and Child Themes Fri, 11 Nov 2016 09:20:33 +0000 en-US hourly 1 Nellie 1.4 is Finally Out with Awesome Features, Functionalities and Style https://ayanize.com/product-release/nellie-1-4-is-finally-out-with-awesome-features-functionalities-and-style/ https://ayanize.com/product-release/nellie-1-4-is-finally-out-with-awesome-features-functionalities-and-style/#respond Thu, 10 Nov 2016 16:49:19 +0000 https://ayanize.com/?p=11188
Notice: Trying to get property 'post_author' of non-object in /home/ayanizec/public_html/wp-content/themes/Divi-Child-Theme/functions.php on line 574

We are glad to announce that Nellie 1.4, the more advanced and more stylish e-commerce theme bundled with more features, is finally out. But before we proceed to go into details of this version release, we would sincerely like to seek your apology for the much delayed release of this theme. It took much longer than we expected. But we are happy that we’ve been able to roll this out eventually.

All Nellie owners who have this theme activated in their sites will see a notification of this update in their dashboard shortly. We’re once again sorry for this delay.

Nellie 1.4 brings in more style and features with it. Let’s have a look at them in a nutshell. The detailed information will be found in the documentation.

Additional Page Layouts

Nellie 1.3 had only one homepage layout. In this version, we tried our best to design a few layouts for homepages and contact pages. You can use any of them or create your own. We hope you like a few of them. Have a look at a few.

Nellie Custom Header

Nellie 1.4 has an option to build the header section using Divi modules just like you usually build a page. Yes! You can create the entire header using any of the Divi modules. The interface remains the same. So, it’s easy and intuitive for you to design your header.

This is an optional action which remains activated by default. If you do not wish to use this header format, you can switch to Nellie Default Header (view our Demo 2) at will. Modifications made in either of the headers during the development process do not change even if you shuffle between the headers.

Addition: Nellie has also a Custom Menu Module which you can use to display your navigation menu. It has customized the Divi Fullwidth menu module to fit into the normal section.

Mobile Menu

Nellie 1.4 introduces a new menu exclusively for the mobile devices. In Nellie 1.3, the menu had issues especially for longer ones. Now we have a sleek slide-out menu for small screens. Here are the features.

  • Exclusive logo for the mobile menu;
  • Social icons on the menu;
  • Font Awesome Icons for the menu items;
  • Expand/Collapse child menu items;
  • Search box in the menu;
  • Ability to change the search box or the social icons placement.

When the theme is activated, you will find a new menu location – Mobile Menu. Nellie also imports a sample nav-menu for mobiles. You can use this menu or create your own. All you need to do is to assign that menu for the mobile menu location.

Note: When you view or inspect elements on Nellie theme for mobile devices, you need to use Chrome Browser Mobile Inspect Element Tool since the mobile menu works on real devices’ browser user agents and is not based on screen width.

Wish-list

Popular e-commerce websites like Amazon.com, eBay.com, Walmart.com allow visitors to shortlist products on their store. It helps them compare the products later and make the final purchase. Nellie brings in this feature in the 1.4 version. You can browse products in the store, put some of your selected ones in your wishlist, re-look at them in one place and proceed with the orders accordingly.

The action is optional and it can be added on the product loop and/or in the single product pages. The Wishlist compare page is a CPT which you can also further customize.

Custom User Login Feature

If you use Nellie Custom Header, you will also need to use the Nellie Custom Users Login Feature. Please refer to our demo site and have a look at this (Use demo for both username and password). Nellie uses a shortcode to put the login/register form which you can customize further. The logged in users get basic information (their active cart, recent orders, and so) about their account in the same location.

AC ShortCodes

Nellie includes the features of AC ShortCodes in its core. You can convert any Divi module into a shortcode and use this inside any other Divi module editor. The mid section of Homepage Two Layout (just below the Exclusive Women Clothing heading) uses the AC ShortCodes features inside a Divi Tabs Module.

Note: The AC ShortCodes do not work in the Quick View Mode in this version. We will work on this in its next version update.

Color Styling (Customization)

In this version, admins can also color certain elements that Nellie adds to the theme like body link color, color of the product titles and price, mobile menu color and so. We will add more control in this section in the next version. You’re also welcome to suggest any addition in this section.

Nellie 1.4 also comes in with a Code Editor for adding Custom CSS. Unlike the Divi Custom CSS box in the epanel, you will see syntax highlighting when you add your CSS rules in this box. Moreover, the CSS will also be rendered in the minified state.

Three New Modules

Nellie 1.4 adds three custom modules to the already-rich Divi Modules array – Menu Module, Product Carousal Module and Filterable Product Portfolio module. Nellie customizes the Divi Fullwidth Module to make it fit in a normal section. The features here remain the same.

For the Product Carousal and Filterable Product Portfolio modules, Nellie customizes the Fullwidth Portfolio module and Filterable Portfolio module respectively replacing projects/posts with WC product categories. There are certain additions to the features like – ability to display cart buttons or so. They are in beta and we will enhance them further.

Other Additions to Nellie 1.4

  • Divi 3.0 Compatible: Nellie 1.3 was not compatible with Divi 3.0 and we got lots of support tickets for this. Nellie 1.4 will be compatible with Divi 3.0. Even certain exclusive features of Nellie 1.4, like Custom Header, can also be designed in Divi 3.0 Visual Builder.
  • Admin Menus: Nellie has so many Settings Tabs namely WooCommerce, Footer Builder and so. To get to their screens, you will need at least two clicks. Nellie makes this easy for admins. You can get any of the tabs as sub-admin menus under the Nellie parent admin menu. [General>Admin Menus]
  • Make Divi Page Builder the Default Post Editor: Some people prefer to use Divi Page Builder on all posts, pages and projects. Simplifying the process for admins, you can easily make the Divi Page Builder default post editor across all pages, projects, posts, Nellie CPTs and products. [General>General]
  • Product Columns in the Shop Page: You can now choose how many columns the shop archive page will use to display your products. The default is 4 (four). You can make this three or five. [WooCommerce>Shop]
  • Keep Users on Current Page after Login: When a customer logins in to your site, he/she is redirected to his/her My Account page after the successful login. Now you can keep the visitors stay on their currently viewed page after being logged into the site. [WooCommerce>Others]
  • Fetch Product Image: Nellie by default uses Divi Page Builder for the product description area. It means that no product image (featured image) displays, since the entire description area needs to be designed with Divi Page Builder Modules. After we got some requests from our lovely customers, we have have an option to call the featured image in the product page as well. Now you can use both the product featured image as well as the Divi Page Builder to further describe your content in the description area. [WooCommerce>Others]
  • First Two Settings Tabs Disappear: To minimize the clutter in Theme Options page, Nellie will remove the first two tabs Demo Import and Homepage & Menu Settings after their jobs are done. But Nellie also allows you to bring back those two missing tabs if you ever wish to. [Misc>Misc]
  • Unused Footer Widgets Areas are Gone: Since Nellie uses a custom footer, it no longer uses any of the Divi default footer functions. Make this less confused, Nellie removes those widget areas Footer #1, #2, #3, #4 from the Widgets screen, as they are not used in this theme.
  • Detailed Documentation: This time we have a much better documentation both in the online and offline mode. You can view the doc in our website or download its PDF version in your system. You will find both these options in the Misc Settings Tab.

We think we’ve covered most of the Nellie 1.4 features here. For detailed info, you can refer to our doc or check out our three Demo sites.

Nellie is a stylish and advanced e-commerce child theme for Divi. We hope this will cater to your requirements for a robust e-commerce website. In this version, we tried our best to incorporate all the user suggestions that they wanted in Nellie. We will keep doing this in its future versions as well. Feel free to let us know of what features or functionalities you think will be good with Nellie. We will try to follow you for sure.

That’s it for this rather-long blog post today. Do let us know your feedback in the comments or in our social media profiles.

]]>
https://ayanize.com/product-release/nellie-1-4-is-finally-out-with-awesome-features-functionalities-and-style/feed/ 0
How to Add Widgets to Vertical Nav Menu in Divi https://ayanize.com/snippets/how-to-add-widgets-to-vertical-nav-menu-in-divi/ https://ayanize.com/snippets/how-to-add-widgets-to-vertical-nav-menu-in-divi/#comments Sun, 14 Aug 2016 16:01:05 +0000 https://ayanize.com/?p=10293

I was following a post in FB today. A fellow FB group member wants to add some widgets to a Divi site with a Vertical Menu. One of my friends also pointed me to that thread and asked if this could be possible. With his guidance and direction, I think we can achieve this and that too without much fuss.

Let’s see once again. what the scenario is –

  • WP site with Divi Theme
  • Vertical Navigation Menu
  • Custom Widgets in that Menu

Pretty straight forward, isn’t it? Now we’ll attempt to achieve this. We’d need some PHP to help us. Please Read on. (Code explanation has been given below)

STEP #1

Create a navigation menu in (Dashboard> Appearance> Menus) your site. Add your pages or links to that menu and assign this to the Primary Menu Location.

STEP #2

Copy the following set of functions and paste them in your theme functions.php file. Please maintain the exact syntax.

function divi_vertical_widgets(){
register_sidebar( array(
	'name' => 'Vertical Nav Widgets',
	'id' => 'ver-nav',
	'description' => __('Add widgets to Vertical Menu'),
	'before_widget' => '<div id="ver-nav">',
	'after_widget' => '</div>',
	'before_title' => false,
	'after_title' => false
) );
}
function call_widgets_ver_menu() {
	
	$ver_nav = et_get_option( 'vertical_nav');
	if ($ver_nav == true){
	$output = dynamic_sidebar('ver-nav');
	return $output;
}
}
add_filter( 'widgets_init', 'divi_vertical_widgets', 10 );
add_action('et_header_top','call_widgets_ver_menu', 10);

Widgets in the vertical Navigation – Below Menu Items

CODE EXPLANATION

In the STEP #1, we’ve chosen Vertical Navigation for the site. Then we’ve created a menu and have assigned that to the Primary Menu Location. Please refer to the image.

In the STEP #2, we’ve added a couple of PHP functions to achieve what we have been looking for. Since we want to have an option to add widgets to the Nav Menu, we’ve created a new Widget Area named Vertical Nav Widgets. Now, what is the need for this? As the widgets to be added to the Menu location are only meant for the Vertical Menu area, we need to have a specific widget area. We could easily use any of the existing ones but you may use those widgets for other locations as well. So, a good approach would be to have a particular widget area for our purpose. Hence the Vertical Nav Widgets. The function divi_vertical_widgets() does this job. Once created, visit Widgets Page (Dashboard>Appearance>Widgets) and at the top, you will see a new widget area. Now go ahead and add some widgets to this. In this example, I’ve added Meta and Category Widgets.

The second function call_widgets_ver_menu() checks if the site is using a Vertical Navigation and it is indeed using this navigation type, it calls our newly added widgets added in the Vertical Nav Widgets area. As you can see, the function is being hooked to a Divi built-in action et_header_top(). It implies that the widgets will lie below the Primary Menu items as shown in the demo image.

Note: You may (or will) need some CSS to make the widgets look good and according to the Vertical Navigation styling.

What if I want to have the widgets sit above the menu items?

With the two functions above, the widgets will reside below the menu items. But if you want them above them, you will need to do some additional functions. Please read on.

PROCESS #1

Remove the second function (as well as its action hook) as given in STEP #2. Now open your header.php file and locate the following div (use Cntl + F)

<div class="logo_container"><span class="logo_helper"></span><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /></a></div>

PROCESS #2

Just below that paste the this PHP tag

<?php dynamic_sidebar('ver-nav');?>

Save the header.php file and you will see the widgets are showing above the menu items now. Of course, you will need some CSS to adjust its positioning perfectly.

Widgets in the vertical Navigation – Above Menu Items

Hope it helps and works for you. Let me know for any issues or questions if you have. Do share your feedback in the comments.

Thanks

]]>
https://ayanize.com/snippets/how-to-add-widgets-to-vertical-nav-menu-in-divi/feed/ 6
How to Highlight Current Menu Items on a One Page Site in Divi https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi/ https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi/#comments Fri, 12 Aug 2016 16:20:03 +0000 https://ayanize.com/?p=10259

Yesterday I saw a post on FB from a fellow group member. Along with a question as how he can perfectly make a One-Page site on Divi, he also wanted to know if we can highlight the current menu item. To make a One-Page site, you can refer to this Elegant Theme documentation. It’s perfectly explained there.

As for the other request, which we often see on various FB groups, you need to apply some JS functionalities. By default WordPress adds a class to the current page menu item current-menu-item. You can target this class and add your CSS styling. But the problem here is that it will not work on a One-Page site where the menu items take you to the different sections of the same page. Since you are residing on the same page, the WordPress class current-menu-item will apply to all menu items. And if you add CSS styling to this, it will affect all the menus. Not good at all. We want to highlight the particular menu which leads to the dedicated section of the page.

So, what is the solution? The only solution here, is to use some JS (jQuery library to be precise) and let the site know which menu you click, where you’re currently on and thus, highlight that menu item accordingly. First, have a look at the demo site.

I believe you have noticed the changes in the menu items! You can add more CSS to those menu items. Now we will see how we can achieve this. The code explanation has been given below.

STEP #1

Create a One Page site. Add your custom menu links. Refer to the ET doc link above and get this right. Add Div IDs (aka CSS ids) to each section of the page. Once you’re done with this, publish the page and move to the next step.

STEP #2

Move to Divi Theme options page (epanel) and go to the Integration tab. Find the field that reads Add code to the < head > of your blog. And, add the following JavaScript there, and save changes.

<script type="text/javascript">
(function($) {
$(document).ready(function() {
    var navChildren = $("#top-menu li").children();
    var aArray = [];
    for (var i = 0; i < navChildren.length; i++) {
        var aChild = navChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    }
    $(window).scroll(function() {
        var windowPos = $(window).scrollTop();
        var windowHeight = $(window).height();
        var docHeight = $(document).height();
        for (var i = 0; i < aArray.length; i++) {
            var theID = aArray[i];
            var secPosition = $(theID).offset().top;
            secPosition = secPosition - 135;
            var divHeight = $(theID).height();
            divHeight = divHeight + 90;
            if (windowPos >= secPosition && windowPos < (secPosition + divHeight)) {
                $("a[href='" + theID + "']").parent().addClass("active");
            } else {
                $("a[href='" + theID + "']").parent().removeClass("active");
            }
        }
    });

});
})(jQuery);
</script>

STEP #3

Now go to the Divi Theme Options General tab (or to the style.css file in your site) and add the following CSS rules.

#top-menu .active a{
	color: #c3095f!important;
}
#top-menu .active a:after{
	content: '';
	border-bottom: 2px solid #c3095f;
	display: block;
	width: 100%;
	position: relative;
	top: 8px;
}

You can style your menu items as you want. This is just an example. All you need to do is to target the .active class and add your own CSS styling.

CODE EXPLANATION

In the STEP #1 we created a One Page site and added a primary navigation menu. When published, the page has the menu items and these take you to the assigned sections of the same page with a built-in Divi scroll feature. Very cool.

In the STEP #2, we added a JS code. The first part of the code first checks all the available menu items. That’s why the ID #top-menu li. With this ID JS finds all the children menu items available in that nav menu which has a link (a href). Secondly, it calculates the height of the section in the document (read page). You may have a section which is 100px tall but another section which is 600px tall. So it will try to calculate the actual height of those sections dynamically.

Next it decides which section are you on right now. Following the demo site, let’s assume you are currently residing on the section number Two which has a div ID #two. Once it finds that, it assigns a specific class to the menu item which corresponds to this section. In this case, the corresponding menu item is TWO in the nav bar. And the class is active. When you move away from this section, it will remove the class from its menu item and add it to the menu of the section which you’re on. In other words, it means that a particular class active will be appended to the menu item if its corresponding section is currently in view. Hope I am able to explain this in an easy way.

Now you get the CSS class .active. You can take this and add your own styling whichever way you want. If you jump to another menu, it will remove itself and add it to the next menu you click, and the CSS will apply there.

More on this

If you want to use a JS file (recommended and best way) instead of using Divi Integration tab (since you may have other JS codes there and it looks somewhat messy), you can read on.

The standard approach to add JavaScript in a site is to put them in a JS file, instead of pushing them all in the

<head>
section. If you have many such JS snippets, it will be hard for you to maintain. Not a good approach though. You need to be a little bit technical on this. Not a big deal at all.

WordPress recommends to en-queue files instead of calling them in the head(or in another terms importing them in the head). We often see those files directly called from

<head>
which is not the correct way. See this link from WordPress.

Let’s see how we can do this. First create a JS file. You can name it like scroll.js (or whatever you want). Use FTP or cPanel and upload this file in your theme directory. If you’re using a child theme, then it will go to your child theme directory, else Divi directory. If you upload this to Divi, the path will read like this

http://example.com/wp-content/themes/Divi/scroll.js
. For child themes, it will be similar to
http://example.com/wp-content/themes/YOUR-CHILD-THEME-NAME/scroll.js
.

Now add the JS codes as given in the STEP #2. DO MAKE SURE to remove the opening and closing script types. Remove these tags

<script type="text/javascript">......</script>
.

All is set now. Open your functions.php file and add the following function.

// for child themes
function add_front_js_nav()
{
    wp_register_script('scroll-js', get_stylesheet_directory_uri() . '/scroll.js', array(
        'jquery'
    ), '1.1', false);
    wp_enqueue_script('scroll-js');
}
add_action('wp_enqueue_scripts', 'add_front_js_nav');

// for parent theme Divi

function add_front_js_nav()
{
    wp_register_script('scroll-js', get_template_directory_uri() . '/scroll.js', array(
        'jquery'
    ), '1.1', false);
    wp_enqueue_script('scroll-js');
}
add_action('wp_enqueue_scripts', 'add_front_js_nav');

Hope it helps you. Do let us know your feedback in the comments or if you face any problems in implementing this.

Thanks

]]>
https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi/feed/ 45
How to Create a Custom End Point or a Private Page for Customers https://ayanize.com/snippets/how-to-create-a-custom-end-point-or-a-private-page-for-customers/ https://ayanize.com/snippets/how-to-create-a-custom-end-point-or-a-private-page-for-customers/#comments Sun, 07 Aug 2016 13:30:18 +0000 https://ayanize.com/?p=10165

Yesterday a friend on an FB group asked if he could build a private page with videos only for his customers. It means only the customers will have access to that page. There are many membership plugins out there which may do this easily. However, if you don’t want to add one more plugin for this task, you can read on.

custom-menu-woocommerce

In this snippet, I have made an easy function which will add a new tab/menu item in the customers’ My Account page and that page will fetch a content from another page. Let’s see how it works.

STEP #1

First create page. You can add anything in that page; you can also name it as you like. For this example, let’s assume the page should be on videos. So, I will create a page and name this Videos. You can publish the article or just keep this in draft. Once you publish (or save it as a draft), grab the page ID. (look at the browser address bar and you will find the page id). It will be something like this post.php?post=45&action=edit. In my case the page ID is 45.

STEP #2

Open your child theme functions.php file. (if you do not use a child theme, then your changes will be gone when the theme is updated).

Copy and paste the following functions in that file and save changes.

The Code explanation has been given below.

Note: Make sure you update your permalinks once you save the functions

Username: demo | Password: 1234

Note: The above site is our dev server site. The content may not sustain there for a long time

//Step one- you need to create a page and grab its page id
//Step two - paste the set of functions in your functions.php file
//Step - In this example Vidoe is the page and it's the end point
// create a custom end point in the My Accunt Page
function custom_wc_end_point() {
	if(class_exists('WooCommerce')){
    add_rewrite_endpoint( 'videos', EP_ROOT | EP_PAGES );
}
}
add_action( 'init', 'custom_wc_end_point' );
function custom_endpoint_query_vars( $vars ) {
    $vars[] = 'videos';
    return $vars;
}
add_filter( 'query_vars', 'custom_endpoint_query_vars', 0 );
function ac_custom_flush_rewrite_rules() {
    flush_rewrite_rules();
}
add_action( 'after_switch_theme', 'ac_custom_flush_rewrite_rules' );
// add the custom endpoint in the my account nav items
function custom_endpoint_acct_menu_item( $items ) {
   
    $logout = $items['customer-logout'];
    unset( $items['customer-logout'] );
	$items['videos'] = __( 'Videos', 'woocommerce' ); // replace videos with your endpoint name
	$items['customer-logout'] = $logout;
        return $items;
}
add_filter( 'woocommerce_account_menu_items', 'custom_endpoint_acct_menu_item' );
// fetch content from your source page (in this case video page)
function fetch_content_custom_endpoint() {
    global $post;
    $id = "987453291"; // your video page id
    ob_start();
    $output = apply_filters('the_content', get_post_field('post_content', $id));
    $output .= ob_get_contents();
    ob_end_clean();
    echo $output;
}
add_action( 'woocommerce_account_videos_endpoint', 'fetch_content_custom_endpoint' );

CODE EXPLANATION

In the STEP #1, we’ve created a normal page. In this example, the page is Videos. But you can name it like Giveaways or anything. The title is not important; the important thing is the page ID, which you need to copy. So in my case the page ID is 45.

In the SETP #2, we’ve added a few functions. Let’s break them and understand how each of them works.

Our first function is custom_wc_end_point(). With this function we are registering a new WooCommerce end-point. As WooCommerce says

Endpoints are essentially an extra part in the website URL that we detect and show different content when present.

It means the URls we see like lost-password, view-orders, edit-account are WooCommerce endpoint URLs and not normal pages. They are used as suffixes to my-account page. Of course, these pages won’t be accessible if the site does not have WooCommerce activated or if the visitor is not a customer. Read more about end-points here.

Following the structure of the default end-points, a new custom end-point has been added. However, we need to first inform WooCommerce about this. That is what the first function does.

In the second function custom_endpoint_query_vars(), we are giving this a name (a variable to be precise). In this example, the name is videos. This is not the name of the My Account Menu Item. It’s the name of the end-point and of course, it must be in lowercase.

In the next function ac_custom_flush_rewrite_rules() we are adding an extra trigger to flush the permalinks when you switch theme. It’s still recommended to re-save your permalinks when you’re done adding these functions.

The next function custom_endpoint_acct_menu_item() is actually adding a new menu item to the default My Account Menu arrays. By default WooCommerce will show Dashboard, Orders, Downloads, Logout and so. We are just inserting our custom menu tab there above the Logout menu item. The menu name can be in lower or upper case. Follow the comment and replace your text maintaining the exact syntax.

Now all is set but the content to the right of the Video menu tab is empty. It’s because we have not added any content there. Our last function fetch_content_custom_endpoint() does this. It’s a callback function. This function will fetch the content from our Video page which I created in the STEP #1. Go through all the comments and replace text accordingly.

So, you have your own tab, own custom content and only your customers can see this.

Let us know if that works for you or if you find any issues there.

Thanks

]]>
https://ayanize.com/snippets/how-to-create-a-custom-end-point-or-a-private-page-for-customers/feed/ 14
How to Use Divi Builder Blurb Module as a Toggle to Display or Hide Content https://ayanize.com/snippets/how-to-use-divi-builder-blurb-module-as-a-toggle-to-display-or-hide-content/ https://ayanize.com/snippets/how-to-use-divi-builder-blurb-module-as-a-toggle-to-display-or-hide-content/#comments Fri, 05 Aug 2016 19:42:12 +0000 https://ayanize.com/?p=10116

Today a user on an FB group asked if it was possible or easily doable to use Divi Blurb mobules as toggle ones showing and/or hiding some content with the click on the blurb images or titles.

This is a nice idea where we can use a Blurb Module to toggle content added in its editor. This can be easily done with some JavaScript. I am using jQuery library here. Please read on.

STEP #1

First add a Divi Blurb Module on a row. You can add multiple modules to your liking. Add a title and a blurb image. Leave the URL field empty.

Now add the following HTML in the Blurb Editor box.

 

<div class="blurb-content"> /*..keep the div class and structure in tact only..*/
<p>Your content here /*...add anything in between the Divs...*/
Your content here
Your content here
</p>
</div>

In the above HTML you can place anything, image or text. Just make sure you maintain the Div structure

<div class="blurb-content">............</div>

STEP #2

Now move to Divi/Extra epanel/ Divi/Extra Theme Options page and add the following JS in this field Add code to the < head > of your blog under the Integration Tab

<script type="text/javascript">
(function($) {
$(document).ready(function() {
$(".et_pb_blurb_content").click(function() {
$(this).find(".blurb-content").slideToggle();
});
});
})(jQuery);
</script>

STEP #3

Add the following CSS in the Divi epanel Custom CSS Box or in your style.css file.

.blurb-content{
display:none;
.et_pb_blurb_content{
cursor: pointer;
}
}

That’s it. With these three steps, you will see that your content in your blurb will show up with a transition when the Blurb image or the Blurb title is clicked.

Hope it helps. Let us know your feedback.

Thanks

]]>
https://ayanize.com/snippets/how-to-use-divi-builder-blurb-module-as-a-toggle-to-display-or-hide-content/feed/ 9
How to Add a Badge or Similar to This on Divi Blog Module https://ayanize.com/snippets/how-to-add-a-badge-or-similar-to-this-on-divi-blog-module/ https://ayanize.com/snippets/how-to-add-a-badge-or-similar-to-this-on-divi-blog-module/#comments Thu, 04 Aug 2016 20:31:21 +0000 https://ayanize.com/?p=10089

Today a friend of mine posted a question in an FB group asking if we can place a badge or something like this on the featured images of the blog index page built with Divi Blog Module. First I think it would be easy to create a custom field, place the image URL and call that URL on the featured image hooking this filter post_thumbnail_html. . But Divi blog module calls thumbnails from the module different. It does not use the get_the_post_thumbnail() or so. I tried hard but there was no solution for this. All are inside the Blog Module and we cannot (rather should not) edit any core file. So, I took a workaround.

I have nullified the default Divi Blog Module and created a new one with just only one edit. Below the featured image call, I have added one action

<?php do_action('blog_badge_output');?>
. This action will get a call from a custom field input which we will create in the edit post screen. Please read on.

Note: I would assume that you’re using a child theme which has a functions.php file. If not, then your changes will be gone when Divi is updated.

You need to perform two steps. (You must have access to your files via FTP or cPanel)

STEP #1

Login to cPanel (or get to your site files via FTP) and locate your child theme directory. Let’s assume your child theme name is – Divi Child Theme.

Download the file below and upload this to that directory. I have named the file blog-new.php. This file will reside with other files, like your functions.php or header.php and style.css files.

STEP #2

Open your functions.php file and paste the functions below. Please make sure you paste them as exactly as given, else, it will cause a fatal error. The code explanation and some screenshots have been given below.

function divi_new_blog_setup() {
  if ( class_exists('ET_Builder_Module')) {
      include ( 'new.php' );
	  $new = new ET_Builder_Module_Blog_New();
      remove_shortcode( 'et_pb_blog' );
      add_shortcode('et_pb_blog', array($new, '_shortcode_callback'));
	 }
}
add_action('wp', 'divi_new_blog_setup', 9999);



add_action('add_meta_boxes', 'add_badge_mb_post');
function add_badge_mb_post()
{
    add_meta_box('custom-badge-id', 'Badge', 'badge_meta_box_cb', 'post', 'side', 'low');
}
function badge_meta_box_cb($post)
{
    $values = get_post_custom($post->ID);
    $path   = isset($values['badge_url_field']) ? esc_url($values['badge_url_field'][0]) : '';
?>
        <input type="text" placeholder="Complete Image URL Path" name="badge_url_field" id="badge_url_field" value="<?php
    echo $path;
?>" />
		<style>#badge_url_field {width: 100%;}</style>

<?php
}
add_action('save_post', 'save_badge_url');
function save_badge_url()
{
    global $post;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;
    $field = $_POST['badge_url_field'];
    update_post_meta($post->ID, 'badge_url_field', $field);
}
function call_badge_blog_index()
{
    global $post;
    $img  = get_post_meta($post->ID, 'badge_url_field', true);
    $html = '<img style="max-width:20%; min-width: auto;position: absolute;bottom: 10px;right: 10px;" id="badge" src="' . esc_url($img) . '">';
    echo $html;
}
add_action('blog_badge_output', 'call_badge_blog_index');

CODE EXPLANATION

In the STEP #1, we just uploaded a new blog module. It has only one edit around this section. You won’t see any changes when you add the Blog Module. All will look and work same.

<?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
<?php if ( 'on' === $use_overlay ) {
echo $overlay_output;
} ?>

Just below that you will see an action hook –

<?php do_action('blog_badge_output');?>

The above hook calls a value from the set custom field and execute that. You can also use this hook to add more data to this.

In the SETP #2, we added a bunch of functions. One function divi_new_blog_setup() nullifies the default Divi Blog Module and calls our new blog module which is in the blog-new.php file.

The second and third functions add_badge_mb_post() & save_badge_url() creates a metabox, just like any metabox below the Featured Image Meta box in the edit post screen. In that metabox, you will see a field to add your image URL. Here you need to add the complete URL of your image (say badge image). Once you save or publish the post, the value (which is the image URL) is saved in the database under this meta field badge_url_field. Now we have the data in our database. It’s time to pull that data and display on our desired place.

In the final function call_badge_blog_index(), we are calling the saved image URL and adding some inline CSS to this (you can also add your own CSS). Afterwards, we are hooking this function to our custom action hook blog_badge_output() which we have put in the blog-new.php file. Now, Divi blog module checks if any of its posts has the badge URL and if so, it prints that on the post thumbnail on the index page. It’s so simple.

Hope it helps you. Do let us know if there is any issues. Feel free to modify the function to your needs.

]]>
https://ayanize.com/snippets/how-to-add-a-badge-or-similar-to-this-on-divi-blog-module/feed/ 1
Show Different Logos on Selected Categories in Extra Theme https://ayanize.com/snippets/show-different-logos-on-selected-categories-in-extra-theme/ https://ayanize.com/snippets/show-different-logos-on-selected-categories-in-extra-theme/#comments Thu, 04 Aug 2016 08:00:44 +0000 https://ayanize.com/?p=10066

Yesterday a friend on an FB Group posted a question asking if it was possible to show different header logos on selected categories in the Extra Theme. I would say – YES; you can do this using WordPress conditional tags. Following is the process as how you can execute this.

Note: I would assume that you’re using a child theme which has a header.php and a functions.php file. If you do not use a child theme, then your changes will be gone when the theme is updated.

There are two steps for this.

STEP #1

First open your header.php file and locate the following HTML. If you open the file in a code editor like Notepad++, it should be around 158 line (under this comment

<!-- Logo -->
)

<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />

Now replace the entire HTML tag with the following tag (it’s a WP action).

<?php do_action('et_header_output');?>

Now the entire portion will be looking like this –

<!-- Logo -->
<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
<?php do_action('et_header_output');?>
</a>

Instead of –

<!-- Logo -->
<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>

Now save the file and move to functions.php file. There will do the magic.

STEP #2

Add the following function at the bottom of your functions.php file. Make sure you copy and paste this as exactly as given. Do the adjustments according to your needs. The code explanation has been given below.

function display_logo_category(){
	$logo = et_get_option( 'extra_logo' ); // this is your uploaded logo in the Extra epanel. You should upload a default logo
	$logo_cat_1 = 'logo-one.png'; // paste the full URL or relative URL of your first logo. DO Maintain the syntax.
	$logo_cat_2 = 'logo-two.png';  // as above
	$logo_cat_3 = 'logo-three.png'; // as above
	$logo_cat_4 = 'logo-four.png'; // as above

	if(is_category('CAT_ONE')){ // replace CAT_ONE with your own category slug. Do the same for others too.
		echo '<img id="logo" src="'.$logo_cat_1.'">';
	}
	elseif(is_category('CAT_TWO')){
		echo '<img id="logo" src="'.$logo_cat_2.'">';
	}
	elseif(is_category('CAT_THREE')){
		echo '<img id="logo" src="'.$logo_cat_3.'">';
	}
	elseif(is_category('CAT_FOUR')){
		echo '<img id="logo" src="'.$logo_cat_4.'">';
	}
	else{
		echo '<img id="logo" src="'.$logo.'">';
	}
}
add_action('et_header_output', 'display_logo_category');

CODE EXPLANATION

In the first step (STEP #1), we removed the HTML tag which was showing the Extra logo image. In place of it we’ve placed an action which will be called from a function in the STEP #2. Naturally, once you remove this tag, no logo image will be shown when you save the header.php file. It’s because Extra does not find that image any more and hence, cannot show the logo.

In the second step (STEP #2 ), we’ve created a function. The function is somewhat self-explanatory. We first uploaded four logo images with equal dimensions, which are as the following –

  1. logo-one.png
  2. logo-two.png
  3. logo-three.png
  4. logo-four.png

Now we’ve added those images accordingly as per the syntax given in that function. Please make sure you follow the exact syntax, else it will cause a fatal error on your site.

In the next segment of the code, we applied WP conditionals category-wise. In my case, I have four categories where I want to display those four different logos dynamically. My site categories are –

  1. CAT_ONE
  2. CAT_TWO
  3. CAT_THREE
  4. CAT_FOUR

So, what we do here is that we tell WP to check the archive page which is on CAT_ONE. If it finds that, then it’d display my logo-one.png image. If not, then display the default one, which I’d add via Extra epanel. Similarly, WP will check the category CAT_TWO and accordingly show the logo-two.png image. You can add more conditions as many as you wish following the syntax. If WP does not find any logo for a selected category, then it will show the default one which is of course added via Extra epanel.

The good part of using an action instead of calling the function directly is that you can further customize that using this action hook et_header_output.

Hope it helps. Let us know if this works for you. For any further customization or for any issues, do feel free to comment below and we will look into this.

Thanks

]]>
https://ayanize.com/snippets/show-different-logos-on-selected-categories-in-extra-theme/feed/ 6