Warning: Illegal string offset 'capabilities' in /home/webdevtalk/public_html/wp-includes/class-wp-roles.php on line 279

Warning: Illegal string offset 'name' in /home/webdevtalk/public_html/wp-includes/class-wp-roles.php on line 280

Warning: Cannot modify header information - headers already sent by (output started at /home/webdevtalk/public_html/wp-includes/class-wp-roles.php:279) in /home/webdevtalk/public_html/wp-includes/feed-rss2.php on line 8
Web Developing Talk http://webdevelopingtalk.com A Site for Developers Discussion and Tutorials Thu, 10 May 2018 19:44:52 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.9 Divi Theme Tutorial – Add Testimonial Carousel http://webdevelopingtalk.com/divi-theme-tutorial-add-testimonial-carousel/ http://webdevelopingtalk.com/divi-theme-tutorial-add-testimonial-carousel/#respond Thu, 10 May 2018 19:44:52 +0000 http://webdevelopingtalk.com/?p=108 Divi is a popular WordPress Theme but it has some limitations like Testimonial Carousel. In Divi theme there is no sliding testimonial options and also there is no post type testimonial. That’s why you need to add testimonials separately in all pages. And if you need to change or update new testimonials you also need […]

The post Divi Theme Tutorial – Add Testimonial Carousel appeared first on Web Developing Talk.

]]>
Divi is a popular WordPress Theme but it has some limitations like Testimonial Carousel. In Divi theme there is no sliding testimonial options and also there is no post type testimonial. That’s why you need to add testimonials separately in all pages. And if you need to change or update new testimonials you also need to do this in all pages.

Here I am showing you how you can add sliding testimonial or testimonial carousel in Divi Theme using Owl Carousel.

First of all you need to create a child theme of your current activated theme. This is always a good practice because if you work on child theme then there will be no risk to loose anything after Update of the parent theme. You can use a WordPress plugin to create the child theme or you can create it by your own.

Download the Owl Carousel jQuery plugin. Then you need to create a folder named ‘assets’ in your child theme directory. You can do this via login to your cPanel or login via FTP or you can also use WordPress plugin named File Manager. But I will recommend to use cPanel or FTP.

Under ‘assets’ folder please create two more folder named ‘css’ and ‘js’. Maybe you don’t want to create these folders that is okay but I am doing this because I want everything well organized and also this is a good practice. Now we need to upload the Owl Carousel files in our assets folder. We need to only upload the below files in the mentioned directory on child theme.

  1. owl.carousel.min.css (Upload it to ‘assets/css’)
  2. owl.theme.default.css (Upload it to ‘assets/css’)
  3. owl.carousel.min.js (Upload it to ‘assets/js’)

Okay now we need to enqueue this scripts in our child theme functions.php file. Open the functions.php file from child theme to edit and add the below code. Please change the ‘your-child-theme’ with your child theme name.

/**** Add owl Carousel ***/
function dk_owlc_assets() {
    // Load Google jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.12.4');
    wp_enqueue_script('jquery');
 
    // Owl Carousel 2
    wp_enqueue_style( 'owlcarousel_css', '/wp-content/themes/your-child-theme/assets/css/owl.carousel.min.css' );
	wp_enqueue_style( 'owlcarousel_default_css', '/wp-content/themes/your-child-theme/assets/css/owl.theme.default.min.css' );
    wp_enqueue_script('owl_carousel_js', '/wp-content/themes/your-child-theme/assets/js/owl.carousel.min.js', true, '2.3.4');
}
add_action( 'wp_enqueue_scripts', 'dk_owlc_assets', 15);

So we are done with adding the Owl Carousel in our WordPress Theme. Now we need to create the shortcode for the testimonial carousel or sliding testimonial to show it on website. This is basically the structure of the testimonial. Below the code for the shortcode. Add the code in functions.php file and you can change the content structure according to your need.

// function to add blog shortcode
function add_testimonial($content = null, $atts){
	
	// the query
	$the_query = new WP_Query('post_type=testimonial&showposts=1');
	
	if ($the_query->have_posts()):?>

		<div id="testimonial_carousel">
		
			<?php
			while ($the_query->have_posts()) : $the_query->the_post(); ?>

			<!-- Start of the loop -->

			//You can change the structure according to your need.
			<div class="testimonial_lists">
				<div class="testimonial_featured_image">
					<?php the_post_thumbnail('testimonial-thumb'); ?>
				</div>
				<div class="testimonial_content">
					<h4><?php the_title(); ?></h4>
					<?php the_content(); ?>
				</div>
			</div>

			<?php endwhile; ?>

			<!-- end of the loop -->

			</div>

		<?php wp_reset_postdata(); 

	else :?>
	<p><?php esc_html_e('Sorry, no posts matched your criteria.'); ?></p>
	<?php endif;
}

add_shortcode('ntestimonial', 'add_testimonial');

If you wants to show 2 or more testimonials in one slide you can do that by change the showpost parameter from the shortcode php code

$the_query = new WP_Query('
		post_type=testimonial&showposts=1'
	);

We are almost done. Now we need to add the carousel script for working carousel blog post. Copy and paste the below code on functions.php file to get a working blog post carousel.

/*** Carousel script ***/
function nn_testimonial_script() {
?> 
<?php ?>
    <script type="text/javascript">
        jQuery(window).load(function(){
          jQuery("#testimonial_carousel").addClass('owl-carousel').owlCarousel({
            items: 3,
            margin: 10,
            autoplay: true,
			loop: true,
			center: true,
			smartSpeed: 500,
			dots: true,
          });
        })
    </script>
<?php ?>
    <?php
}
add_action('wp_footer', 'nn_testimonial_script', 99);

We are all done with integrating the testimonial carousel. Now we need to show the testimonial carousel using the shortcode we created. To show the carousel we just created use ‘[ntestimonial]’ shortcode where you wants to show the carousel.

You can style the testimonial carousel like you want. CSS is up to you. Hope this help you. If you need any other help please comments below.

Thanks.

The post Divi Theme Tutorial – Add Testimonial Carousel appeared first on Web Developing Talk.

]]>
http://webdevelopingtalk.com/divi-theme-tutorial-add-testimonial-carousel/feed/ 0
Divi Theme Tutorial – Add Blog Post Carousel or Custom Post Carousel http://webdevelopingtalk.com/divi-theme-tutorial-add-blog-post-carousel/ http://webdevelopingtalk.com/divi-theme-tutorial-add-blog-post-carousel/#respond Mon, 07 May 2018 09:30:35 +0000 http://webdevelopingtalk.com/?p=90 In Divi theme there are options to show grid system Blog Posts but they didn’t have any option for the blog post carousel. In this article I will show you how you can make a Blog Post carousel in Divi or Any Other WordPress theme using Owl Carousel. First of all you need to create […]

The post Divi Theme Tutorial – Add Blog Post Carousel or Custom Post Carousel appeared first on Web Developing Talk.

]]>
In Divi theme there are options to show grid system Blog Posts but they didn’t have any option for the blog post carousel. In this article I will show you how you can make a Blog Post carousel in Divi or Any Other WordPress theme using Owl Carousel.

First of all you need to create a child theme of your current activated theme. This is always a good practice because if you work on child theme then there will be no risk to loose anything after Update of the parent theme. You can use a WordPress plugin to create the child theme or you can create it by your own.

Download the Owl Carousel jQuery plugin. Then you need to create a folder named ‘assets’ in your child theme directory. You can do this via login to your cPanel or login via FTP or you can also use WordPress plugin named File Manager. But I will recommend to use cPanel or FTP.

Under ‘assets’ folder please create two more folder named ‘css’ and ‘js’. Maybe you don’t want to create these folders that is okay but I am doing this because I want everything well organized and also this is a good practice. Now we need to upload the Owl Carousel files in our assets folder. We need to only upload the below files in the mentioned directory on child theme.

  1. owl.carousel.min.css (Upload it to ‘assets/css’)
  2. owl.theme.default.css (Upload it to ‘assets/css’)
  3. owl.carousel.min.js (Upload it to ‘assets/js’)

Okay now we need to enqueue this scripts in our child theme functions.php file. Open the functions.php file from child theme to edit and add the below code. Please change the ‘your-child-theme’ with your child theme name.

/**** Add owl Carousel ***/
function dk_owlc_assets() {
    // Load Google jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.12.4');
    wp_enqueue_script('jquery');
 
    // Owl Carousel 2
    wp_enqueue_style( 'owlcarousel_css', '/wp-content/themes/your-child-theme/assets/css/owl.carousel.min.css' );
	wp_enqueue_style( 'owlcarousel_default_css', '/wp-content/themes/your-child-theme/assets/css/owl.theme.default.min.css' );
    wp_enqueue_script('owl_carousel_js', '/wp-content/themes/your-child-theme/assets/js/owl.carousel.min.js', true, '2.3.4');
}
add_action( 'wp_enqueue_scripts', 'dk_owlc_assets', 15);

So we are done with adding the Owl Carousel in our WordPress Theme. Now we need to create the shortcode for the blog post to show. Below the code for the shortcode. Add the code in functions.php file and you can change the content structure according to your need.

	// function to add blog shortcode
	function add_news($content = null, $atts){
		
		// the query
		$the_query = new WP_Query('post_type=post&showposts=4');
		
		if ($the_query->have_posts()):?>

			<div id="news_list_carousel">
			
				<?php
				while ($the_query->have_posts()) : $the_query->the_post(); ?>

				<!-- Start of the loop -->

				//You can change the structure according to your need.
				<div class="news_lists">
					<div class="news_featured_image">
						<?php the_post_thumbnail('news-thumb'); ?>
					</div>
					<div class="news_content">
						<h4><?php the_title(); ?></h4>
						<div class="news_exceprt_cont">
							<?php the_excerpt(); ?>
						</div>
						<a href="<?php the_permalink(); ?>">Read more</a>
					</div>
				</div>

				<?php endwhile; ?>

				<!-- end of the loop -->

				</div>

			<?php wp_reset_postdata(); 

		else :?>
		<p><?php esc_html_e('Sorry, no posts matched your criteria.'); ?></p>
		<?php endif;
	}

	add_shortcode('news', 'add_news');

We are almost done. Now we need to add the carousel script for working carousel blog post. Copy and paste the below code on functions.php file to get a working blog post carousel.

/*** Carousel script ***/
function dk_carousel_script() {
?> 
<?php ?>
    <script type="text/javascript">
        jQuery(window).load(function(){
          jQuery("#news_list_carousel").addClass('owl-carousel').owlCarousel({
            items: 3,
            margin: 10,
            autoplay: true,
			loop: true,
			center: true,
			smartSpeed: 500,
			dots: true,
          });
        })
    </script>
<?php ?>
    <?php
}
add_action('wp_footer', 'dk_carousel_script', 99);

We are all done with integrating the blog post carousel. Now we need to show the blog post carousel using the shortcode we created. To show the carousel we just created use ‘[news]’ shortcode where you wants to show the carousel.

Here are some CSS code to make the carousel looks better. You can use the CSS code, you can use your own CSS code or you can also customize the below code. If you wants to us the below CSS code please copy and paste it on child theme style.css file.

.news_lists{
	display: block;
	background: #fff;
	color: #000;
}
.news_featured_image, .news_featured_image img{
	display: block;
	overflow:hidden;
}
.news_content{
	display: block;
	overflow: hidden;
	padding: 35px 20px;
	background: #fff;
}
.news_content h4{
	text-transform: capitalize;
	margin-bottom: 15px;
    font-size: 24px;
    line-height: 1.3;
}
.news_exceprt_cont{
	margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.25;
}
.news_content a{
	position: relative;
    font-size: 16px;
	color: #f9525d;
}
.news_content a:after{
	position: absolute;
    background: #f9525d;
	bottom: -5px;
    width: 100%;
    content: "";
    height: 1px;
    left: 0;
}
.owl-dots{
	text-align: center;
}
.owl-carousel .owl-dot{
	width: 15px;
    height: 2px;
    background: #444;
    display: inline-block;
    margin: 0 3px;
}
.owl-carousel .owl-dot.active{
	background: #f9525d;
}

I used this method many times in my work and every time this works great. Though if you found any issue or face any problem using this code please let me know so that I can help you and also can improve the code.

The post Divi Theme Tutorial – Add Blog Post Carousel or Custom Post Carousel appeared first on Web Developing Talk.

]]>
http://webdevelopingtalk.com/divi-theme-tutorial-add-blog-post-carousel/feed/ 0
How to Add Google Analytics to WooCommerce Thank You Page http://webdevelopingtalk.com/add-google-analytics-to-woocommerce-thank-you-page/ http://webdevelopingtalk.com/add-google-analytics-to-woocommerce-thank-you-page/#comments Thu, 03 May 2018 04:15:49 +0000 http://webdevelopingtalk.com/?p=69 Woo Commerce is the widely used theme for building eCommerce platform in wordpress. Sometimes it is required to track leads on how many users purchased/checkout the goods using Google AdServices. Here, I will provide a simple script which can be added to functions.php to add the google script to your WooCommerce theme. Explanation: Here woocommerce_thankyou […]

The post How to Add Google Analytics to WooCommerce Thank You Page appeared first on Web Developing Talk.

]]>
Woo Commerce is the widely used theme for building eCommerce platform in wordpress. Sometimes it is required to track leads on how many users purchased/checkout the goods using Google AdServices. Here, I will provide a simple script which can be added to functions.php to add the google script to your WooCommerce theme.

/*** Add Google Conversion Code ***/
add_action( 'woocommerce_thankyou', 'google_conversion_tracking' );     

function google_conversion_tracking() {     
?>
<!-- Google Code for Conversion Page --> 
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 'Your Conversion Id Here';
var google_conversion_label = "Your Conversion Label Here";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" 
	 src="//www.googleadservices.com/pagead/conversion/'Your Conversion Id Here'/?label='Your Conversion Label Here'&guid=ON&script=0"/>
</div>
</noscript>
<?php
}
Add to functions.php

Explanation:

Here woocommerce_thankyou is a function for Woo Commerce to add to the thank you page and google_conversion_tracking is the callback function for that. You need to create a google ad account to get the tracking codes like conversion id and label. Once you have that, change the places in the code with your id and conversion label. You are done :).

Check with the tracking dashboard on google apps.

For any new addition or modification, please feel free to knock Devkinz:

The post How to Add Google Analytics to WooCommerce Thank You Page appeared first on Web Developing Talk.

]]>
http://webdevelopingtalk.com/add-google-analytics-to-woocommerce-thank-you-page/feed/ 2
How to Create Custom Module for Divi Theme http://webdevelopingtalk.com/create-custom-module-for-divi-theme/ http://webdevelopingtalk.com/create-custom-module-for-divi-theme/#respond Thu, 26 Apr 2018 08:48:18 +0000 http://webdevelopingtalk.com/?p=22 Recently I’ve been trying some time extending modules in the Divi Page Builder. I had a few requests from clients to either make changes to an existing module or create a new module with custom functionality. As always my first port of call was a Google Search. The results, while not abundant, did eventually lead […]

The post How to Create Custom Module for Divi Theme appeared first on Web Developing Talk.

]]>
Recently I’ve been trying some time extending modules in the Divi Page Builder.

I had a few requests from clients to either make changes to an existing module or create a new module with custom functionality. As always my first port of call was a Google Search. The results, while not abundant, did eventually lead me down the right path.

The limited set of articles I did find didn’t really explain the complete process of setting up a new module or they used slightly incorrect ways of adding a new module to the page builder. So I decided to write a post that detailed the entire process from start to finish. For the sake of this article, we are going to take the Text module and make a new one based on it. If you don’t know the modules in Divi theme checkout our tutorial below:

Divi Builder Module Introduction for Divi Themes

This article won’t go into the details of actually customising the module, as that will be dependant on your specific needs. Also it would probably take up a whole heap of additional articles explaining all the sections in a Page Builder Module Class.

1. Getting Warm Up:

First off you a basic understanding of PHP and WordPress hooks. First You need to create a Child Theme to work on. If you are not familiar with the child theme creation process, check out our tutorial on child theme creation. All the PHP code will be added to one of two files in your child theme. The first is the child theme’s functions.php file (create it if there isn’t one) . The second file will contain all the module related code. You can call the file anything you want, for this article we will call ours custom-text-module.php.

So in the root of our child theme I will have

functions.php custom-pb-text-module.php

Inside the functions.php file, include the module file, typically at the top of the functions.php

/* include custom image module file*/ 
include(get_stylesheet_directory() . '/custom-pb-text-module.php');

The get_stylesheet_directory() function will return the path to the child theme folder.

Everything else we do will be inside the custom module file.

2. Write your own Custom Module

Inside the module file add this code:

function ex_divi_child_theme_setup() {
  if ( class_exists('ET_Builder_Module')) {
    // this is where your new module class will go
  }
}
add_action('et_builder_ready', 'ex_divi_child_theme_setup');
Lets Analyze the code:

Adds a hook to the et_builder_ready action, to call the ex_divi_child_theme_setup function. The ex_divi_child_theme_setup function then checks if the Builder Module class exists and if true, runs the new module class.

2. Copy from an existing Text Module:

The ET Builder Module Classes are quite big, so you don’t really want to write the entire thing yourself. (You’d probably need to be a developer at Elegant Themes to be able to do so anyway). So choose an existing module that is closest to what you need, and then go and find it’s Class in the following Divi file:

//path-to-Divi-theme-folder/includes/builder/main-modules.php

I’m going to use the Text module, it looks like this:

class ET_Builder_Module_Text extends ET_Builder_Module {
  function init() {
    $this->name = __( 'Custom Text', 'et_builder' );
    $this->slug = 'et_pb_custom_text';
    // All the codes from the module class 

  } 
}
new ET_Builder_Module_Text;

Copy the entire class of the module you want to use including that last ‘new ET_Builder’ line and paste it inside your module file, replacing the comment of ‘this is where your new module class will go’.

3. Change the class name and slug for New Divi Custom Module:

Firstly you need to rename the Class Name of the new module and the slug. The default Text Module class looks like this

class ET_Builder_Module_Text extends ET_Builder_Module {
  function init() {
    $this->name = esc_html__( 'Text', 'et_builder' );
    $this->slug = 'et_pb_text';

For our new module we would do something like this

class ET_Builder_Module_Text2 extends ET_Builder_Module {
  function init() {
    $this->name = esc_html__( 'Custom Text', 'et_builder' );
    $this->slug = 'et_pb_custom_text';

Note that it is very important to keep the et_pb_ prefix for the module slug, otherwise the Divi Builder won’t load the module.

Then we need to change how the instance of the new class is called, as well as add the shortcode for it (so that WordPress can render your module on the website). At the moment it says this:

new ET_Builder_Module_Text;

We need to change it to this

$et_builder_module_text2 = new ET_Builder_Module_Text2();
add_shortcode( 'et_pb_custom_text', array($et_builder_module_text2 , '_shortcode_callback') );

using the new class name and the new slug.

NOTE: if you want to override an existing module with a customised version (not add a new one), you only need to change the class name of the module, not the slug. Also you need to replace the shortcode for that module.

class ET_Builder_Module_Text2 extends ET_Builder_Module {
  function init() {
    $this->name = esc_html__( 'Custom Text', 'et_builder' );
    $this->slug = 'et_pb_custom_text';

and

$et_builder_module_text2 = new ET_Builder_Module_Text2();
remove_shortcode( 'et_pb_text' );
add_shortcode( 'et_pb_text', array($et_builder_module_text2, '_shortcode_callback') );

Anyway, we’re building a new module, so your final custom module file looks something like this:

function ex_divi_child_theme_setup() {

   if ( class_exists('ET_Builder_Module')) {

      class ET_Builder_Module_Text2 extends ET_Builder_Module {
         function init() {
            $this->name = __( 'Custom Text', 'et_builder' );
            $this->slug = 'et_pb_custom_text';
            // All the codes from the module class
   } 
 } 
   $et_builder_module_text2 = new ET_Builder_Module_Text2(); 
   add_shortcode( 'et_pb_text2', array($et_builder_module_text2, '_shortcode_callback') ); 
} 
} 
add_action('et_builder_ready', 'ex_divi_child_theme_setup');

Now you are ready to start making changes to the module’s code and build your custom module functionality.

For any Custom Divi Module, you can contact to Devkinz:

The post How to Create Custom Module for Divi Theme appeared first on Web Developing Talk.

]]>
http://webdevelopingtalk.com/create-custom-module-for-divi-theme/feed/ 0
Introduction to Divi Theme – Divi Builder Module http://webdevelopingtalk.com/divi-theme-builder-module/ http://webdevelopingtalk.com/divi-theme-builder-module/#respond Wed, 25 Apr 2018 14:05:29 +0000 http://webdevelopingtalk.com/?p=9 Divi is one of the most popular themes in wordpress and used by various companies for their website designing. Divi have a rich Divi Builder Plugin that comes with Divi Theme or you can add only Divi Builder without theme. Divi builder helps to build the site with different features within few clicks. There are […]

The post Introduction to Divi Theme – Divi Builder Module appeared first on Web Developing Talk.

]]>
Divi is one of the most popular themes in wordpress and used by various companies for their website designing. Divi have a rich Divi Builder Plugin that comes with Divi Theme or you can add only Divi Builder without theme. Divi builder helps to build the site with different features within few clicks. There are about 36 Divi Builder modules that comes with the plugin:

Accordion
Accordion module is used for dropdown post creation. Multiple posts of same size can be placed as example shown below.

 

Audio
This module will help to create an audio album for the website. Below is one example.

Bar Counter
Bar Counter module is for adding any Bar counter with percentage or bars. It is useful for showing any progress.

Blog
This module is for adding blog showing page. Blogs can be shown on Grid or Fullwidth form. Here we shown as a Grid blog view.

Blurb
The blurb module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Blurb modules can be placed in any column that you create.

Button
As the name mentions, this will create buttons in the website. You can change CSS and add links to the buttons.

Call to Action
Call to action will create an animated fullwidth button that can be used to create links.

Circle Counter
Circle Counter module is for adding any Circular counter with percentage or numbers. It is useful for showing any progress/Project Status.

Code

Comments

Contact Form

Count Down Timer

Divider

Email Optin

Filterable Portfolio

Gallery

Image

Login

Map

Number Counter

Person

Portfolio

Post Navigation

Post Slider

Post Title

Pricing Tables

Search

Shop

Sidebar

Slider

Social Media Follow

Tabs

Testimonial

Text

Toggle

Video

Video Slider

The post Introduction to Divi Theme – Divi Builder Module appeared first on Web Developing Talk.

]]>
http://webdevelopingtalk.com/divi-theme-builder-module/feed/ 0