Can't insert a widget in a parent theme

Guseinova · November 16, 2018, 12:17pm

Hello everyone,

I am struggling to do one thing and I hope you can help me.
I need to insert a widget on my site, and the developed said I need to insert it between the of my page. I don’t have a child theme, so I use an AdInserter plugin to insert any ads. But it’s not working because this a widget. How do I add this widget on a specific page of my website?

Thank you very much for your support.

paul.r · November 16, 2018, 1:27pm

Hi,

Thanks for writing in!

You can use the widget area element instead,

Hope that helps

Guseinova · November 16, 2018, 3:31pm

Thank you so much for your help. But however, I don’t really understand this. Let me try to explain what I am struggling with. Basically, I need to add a code that will display a widget on my site, so not a widget, but an actual widget. I have a code, which starts with <div class=“ja-gadget-virtual-assistant-inline cleanslate” and carries on. I have two widget that I can use, one is fixed and one is expandable. They are both ‘live’. They told me to put this code in between the <body of the page, but I don’t have a child theme and any changed will be wiped out I guess?
I tried to use a widget area to add the code and to use the text, but I guess it’s not how you need to do this. I even tried plugin widget logic, but it just displays text.
So my question is, how do I add the code for this widget to my page?
Thank you very much for your help and I really appreciate it.

Prasant · November 16, 2018, 4:11pm

Hello Sevda,

Thanks for updating the thread.

Installing child theme won’t have any negative effect on the website layout. Child theme simply inherits the parent theme without affecting the layout.

Having said that, if you want to add a code before body tag, use x_before_site_begin. You can see some examples from the following link (https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x-pro/208). Place following code in child theme function.php file.

function widget_code() { ?>

  <script>
    // Widget code goes here
  </script>
<?php }

add_action( 'x_before_site_begin', 'widget_code' );

You can use following resources to download and setup child theme.

Download Child theme from following source: https://theme.co/apex/child-themes

Please take a look at following article to setup child theme:

Thanks.

Guseinova · November 16, 2018, 5:56pm

Thank you very much for further explanation. I have installed child theme, and tried to insert the code in functions.php file. I have few questions:
I have looked at the article that explains actions and filters, but I don’t really get it fully.

Where exactly in functions.php do I add the code? I guess it’s just after the line 24 that is empty?
I have done this, but it only added the text to the top of my website, squeezing everything. I even tried doing the x_before_site_end instead of begin. Same thing, just displaying text.
I need this widget to be displayed only on 1 page of the website, which filter to add for this?

Please assist me further as I can’t seem to find answers on the forum. Thanks again for prompt replies.

rad · November 16, 2018, 8:10pm

Hi Sevda,

Please add it at the end of any existing content/code. You can add it anywhere but it may break and cause internal error if you accidentally added it between code blocks.
May I know the complete code that you added? Have you added the part <div class="ja-gadget-virtual-assistant-inline cleanslate" too?
You don’t need another filter, you only need to change the code to something like this

function widget_code() { 

if ( !is_page( 343 ) ) return false; ?>

  <script>
    // Widget code goes here
  </script>
<?php 

}

add_action( 'x_before_site_begin', 'widget_code' );

Where 343 is the page ID of your specific page. And please check https://www.ostraining.com/blog/wordpress/how-to-find-the-page-id-in-wordpress/ for finding your page ID.

Thanks!

Guseinova · November 17, 2018, 12:00am

Yes, I am inserting the code after it says after script and //
I have added the code and changed the number of page like you told me, without changing anything. After I do this, I only see a text (code) on top of the page. What could it be? Can these be any gaps when I copy and paste the code?
Thank you very much for your support.

ruenel · November 16, 2018, 11:06pm

Hello @Guseinova,

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

ruenel · November 17, 2018, 12:18am

Hi @Guseinova,

Please disable your 2 step verifications so that we can log in easily.

Thanks.

Guseinova · November 17, 2018, 12:21am

Sorry about this, I forgot to do it. All done now.

ruenel · November 17, 2018, 1:05am

Hello @Guseinova,

I have updated the code and use this:

function widget_code() { 

if ( !is_page( 1551 ) ) return false; ?>

    <div class="ja-gadget-virtual-assistant-inline cleanslate">
    <link rel="stylesheet" href="https://components.justanswer.com/css/ja-gadget-virtual-assistant-inline" />
    <script type="text/javascript" src="https://components.justanswer.com/js/ja-gadget-virtual-assistant-config,ja-gadget-virtual-assistant-inline">
    (function(){
    require("ja-gadget-virtual-assistant-inline")(
    (function() { var scripts = document.querySelectorAll('script[src="https://components.justanswer.com/js/ja-gadget-virtual-assistant-config,ja-gadget-virtual-assistant-inline"]'); return scripts[scripts.length - 1].parentNode })(),
    require("ja-gadget-virtual-assistant-config")({"partner":"US","affiliateId":"ho|7576|1912","profile":"vet","settings":"default","size":"450x400","showCopyright":false,"trackingPixels":{"transition":"https://trk.justanswer.com/aff_c?offer_id=2&aff_id=7576&file_id=1912&source=Fixed VA"}})
    ).initialize();
    })();
    </script>
    </div><img src="https://trk.justanswer.com/aff_i?offer_id=2&aff_id=7576&file_id=1912&source=Fixed VA" width="1" height="1" />
    
<?php
}
add_action( 'x_before_site_begin', 'widget_code' );

It is now loaded on the page. The ad on the other hand does not display anything. Please make sure that you have given us the correct ad code:

<div class="ja-gadget-virtual-assistant-inline cleanslate">
    <link rel="stylesheet" href="https://components.justanswer.com/css/ja-gadget-virtual-assistant-inline" />
    <script type="text/javascript" src="https://components.justanswer.com/js/ja-gadget-virtual-assistant-config,ja-gadget-virtual-assistant-inline">
    (function(){
    require("ja-gadget-virtual-assistant-inline")(
    (function() { var scripts = document.querySelectorAll('script[src="https://components.justanswer.com/js/ja-gadget-virtual-assistant-config,ja-gadget-virtual-assistant-inline"]'); return scripts[scripts.length - 1].parentNode })(),
    require("ja-gadget-virtual-assistant-config")({"partner":"US","affiliateId":"ho|7576|1912","profile":"vet","settings":"default","size":"450x400","showCopyright":false,"trackingPixels":{"transition":"https://trk.justanswer.com/aff_c?offer_id=2&aff_id=7576&file_id=1912&source=Fixed VA"}})
    ).initialize();
    })();
    </script>
    </div><img src="https://trk.justanswer.com/aff_i?offer_id=2&aff_id=7576&file_id=1912&source=Fixed VA" width="1" height="1" />

Regards.

Guseinova · November 17, 2018, 1:17am

<div class="ja-gadget-virtual-assistant-hybrid cleanslate">
<link rel="stylesheet" href="https://components.justanswer.com/css/ja-gadget-virtual-assistant-hybrid" />
<script type="text/javascript" src="https://components.justanswer.com/js/ja-gadget-virtual-assistant-config,ja-gadget-virtual-assistant-hybrid"></script> type="text/javascript">
(function(){
require("ja-gadget-virtual-assistant-hybrid")(
(function() { var scripts = document.querySelectorAll('script[src="https://components.justanswer.com/js/ja-gadget-virtual-assistant-config,ja-gadget-virtual-assistant-hybrid"]'); return scripts[scripts.length - 1].parentNode })(),
require("ja-gadget-virtual-assistant-config")({"partner":"US","affiliateId":"ho|7576|1438","profile":"vet","settings":"default","size":"default","showCopyright":false,"trackingPixels":{"transition":"https://trk.justanswer.com/aff_c?offer_id=2&aff_id=7576&file_id=1438&source=Expanded"}}) src="https://trk.justanswer.com/aff_i?offer_id=2&aff_id=7576&file_id=1438&source=Expanded" width="1" height="1" />

Guseinova · November 17, 2018, 1:22am

Can you please try this code instead? If this one doesn’t work, I will contact the company. Thank you very much. Does the box above display the code correctly? I used preformatted text button for it.

Guseinova · November 17, 2018, 1:31am

This widget should appear 15 seconds after page has loaded.

ruenel · November 17, 2018, 1:40am

Hello @Guseinova,

Thanks for updating in!

There is an error of the original code:

Please contact the creators of this code and ask for further assistance.

Guseinova · November 17, 2018, 2:18am

I have contacted them, and yes, there was a mistake. You are wonderful at what you do for helping me and noticing these errors. I have accessed the new code myself and typed it in the editor, and it’s now working. I have learnt a lot today.

Thank you very much again and you guys are the best.

Best wishes.

ruenel · November 17, 2018, 2:33am

Hey,

You’re most welcome!
We’re glad we were able to help you out.

Regards.

system · November 27, 2018, 2:33am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.