Greetings,
Can someone tell me how can I insert this functionality to wordpress theme,
The html file is located in template-hook.php in wordpress that currently iam working on.
so how can i insert this jquery in order to use in template-hook.php?
The code is exactly same in the link below,
TIA,
Hello @cabaisma
You can try something like this:
<?php
add_action( 'wp_enqueue_scripts', 'some_function_name' );
function some_function_name() {
?>
<script type="text/javascript" id="some-id-name">
var hellos = ['hi, i\'m', 'bonjour, je m\'appelle', 'hallo, ich heiße']
var index = 0
jQuery('#hellos').text(hellos[0]);
(function animate () {
jQuery('#hellos').fadeOut(1000, function () {
index = (index + 1) % hellos.length
this.textContent = hellos[index]
}).fadeIn(1000, animate)
})()
</script>
<?php
}
You are going to have to mess with it a bit to make it work, but this will insert the jQuery into your template.
thanks @rickstewart, it helps me alot. what about the below, please help.
I want to show it in the categori pages or let say in entire website, i want it visible. because currently it is appearing only in one page.
(home page) (other pages)Heere are categorie pages, its not visible:
So i want to show in entire website…
Hello @cabaisma
Well, I would try moving the code out of the template file “template-hook.php” and insert it at the end of the file called “functions.php”
Or
You can add a plugin like Head, Footer and Post Injections and move the code there
Or
You can check your WordPress theme, it very well may already have a box to add a script to all the pages.
Just note however, if you use the last 2 methods you only add the <script> code </script> parts, not the php parts.
Actually - sorry - I though you were asking about moving the code I suggested in the first part of your question, but it looks like you are asking an entirely new question. Sorry - my bad…
If you want to add a block of html code to every page, the answer to the question depends on where you want to add it.
If you want it to appear in as part of the body of all the pages you will likely just have to add it to every page inside the page editor.
If the theme you are using has an available widget area in the correct page location then you can simply add a widget like “Custom HTML” ( that comes with all WordPress installations ) and add the html code there. You would need to rewrite the code in your example to remove the php parts, $page_title = and use only the html/css part.
Whatever you are trying to do, do a little research on “WordPress widgets” if the concept is not familiar to you, then use what you learn to adapt what you are trying to do to make it work.
take you for your great reply!
the problem is, the only the second div is not appearing in entire page, but the first div is visible…
What are you trying to do here?
<div #38200B="textwidget">
I don’t see this as being correct, but I may just be missing what it is the code is doing…
i didn’t notice that!! lol let me check…
it has nothing to do with my problem anyway
this is the story, actually it was a plugin, then i copy the short code and put it it widget text, then the i copy the html code of widget and put it in php file and then i hide the display of the widget.
that html code in php file is actually copied from widget given code and do some modification.
i hope the scenario was clear to you
I think I understand. You extracted a section of code ( the code in your previous screenshot ) from inside the plugin, then used “display: none;” to hide the original plugin display so that you could work on the extracted code.
Can you paste the code you are working on? Not a screenshot, but something we can cut-and-paste into an editor to see if anything shows up as an error?
Use preformatted text to wrap the code you paste in please. Just click on the </> in this editor window, then paste your code snippet.
This is the code located in template-hooks.php (that extracted from widgets html code)
$page_title = '<section id="xxx" class="widget widget_text">
<div class="custom-widget-title" style="background: #E0E0E0; font-size: 1.3em; border-right: 5px solid #38200B; float: right; padding: 0 5px;"><i class="fas fa-rss"></i> جديد الموقع</div>
<div id="textwidget">
<div id="mtphr-dnt-615" class="mtphr-dnt mtphr-dnt-615 mtphr-dnt-default mtphr-dnt-rotate mtphr-dnt-rotate-fade">
<div class="mtphr-dnt-wrapper mtphr-dnt-clearfix">
<div class="mtphr-dnt-tick-container">
<div class="mtphr-dnt-tick-contents">
<!--Beginning of Announcement Content-->
<div class="mtphr-dnt-tick mtphr-dnt-default-tick mtphr-dnt-clearfix "><a href="https://www.aldafiri.com/announcementpage/">درس جديد خلال شهر رمضان: فضائل القرآن من صحيح البخاري</a></div>
<div class="mtphr-dnt-tick mtphr-dnt-default-tick mtphr-dnt-clearfix ">This is an Announcement No. 2</div>
<div class="mtphr-dnt-tick mtphr-dnt-default-tick mtphr-dnt-clearfix ">This is an Announcement No. 3</div>
<div class="mtphr-dnt-tick mtphr-dnt-default-tick mtphr-dnt-clearfix ">This is an Announcement No. 4</div>
<div class="mtphr-dnt-tick mtphr-dnt-default-tick mtphr-dnt-clearfix ">This is an Announcement No. 5</div>
<!--End of Announcement Content-->
</div>
</div>
</div>
</div>
</div>
</section>';
here is the short code from plugins which i inserted in widgets:
[ditty_news_ticker id="615"]
Here is the php shortcode, but i didnt use it because there is an error,(check my first post)
<?php if(function_exists('ditty_news_ticker')){ditty_news_ticker(615);} ?>
i think to lessen my problem, we will go for this one… its pretty clean and simple…
Hey @cabaisma
Sorry I could not be of more help.
Just for fun, there is another way to execute a shortcode inside php, probably will not make a difference, but you could give it a try.
<?php echo do_shortcode('[ditty_news_ticker id="615"]'); ?>
Im just wondering, why the first div is showing in entire site, but the other is not.,
Hello @cabaisma
I do not see an obvious reason. I would examine this section in Chrome Developer Tools to see what might be the problem. The id “textwidget” is a common name in WordPress. Perhaps that id is being used elsewhere, and the CSS associated with that is causing the div not to be displayed. You could do a quick test by changing the id from “textwidget” to something like “textwidget-005” to see if your missing div appears.