Add header news title scrolling wp

Here's a step-by-step guide on how to add a scrolling news title header in WordPress:

Method 1: Using a Plugin

Install and activate the "Header & Footer Scripts" plugin from the WordPress plugin directory.
Go to Settings > Header & Footer Scripts and click on the "Add New" button.

In the "Header" section, add the following code:

<script>
jQuery(document).ready(function($) {
 var header = $('#header');
 var title = $('#header.title');
 var interval = setInterval(function() {
   title.animate({left: '-100%'}, 1000, function() {
     title.css('left', '0');
   });
 }, 5000);
});
</script>

In the "Footer" section, add the following code:

<style>
#header.title {
 position: relative;
 left: 0;
 transition: left 1s;
}
</style>

Save the changes.

Method 2: Using Custom CSS and JavaScript

Add the following CSS code to your theme's stylesheet (style.css):


#header.title {
position: relative;
left: 0;
transition: left 1s;
}

header.title.scrolling {

left: -100%; }

2. Add the following JavaScript code to your theme's functions.php file:
```php
function add_scrolling_header() {
 ?>
  <script>
    jQuery(document).ready(function($) {
      var header = $('#header');
      var title = $('#header.title');
      var interval = setInterval(function() {
        title.addClass('scrolling');
        setTimeout(function() {
          title.removeClass('scrolling');
        }, 1000);
      }, 5000);
    });
  </script>
  <?php
}
add_action('wp_footer', 'add_scrolling_header');

Save the changes.

Method 3: Using a Theme Function

Create a new file in your theme's directory called functions.php.

Add the following code to the file:

function scrolling_header() {
?>
<script>
 jQuery(document).ready(function($) {
   var header = $('#header');
   var title = $('#header.title');
   var interval = setInterval(function() {
     title.animate({left: '-100%'}, 1000, function() {
       title.css('left', '0');
     });
   }, 5000);
 });
</script>
<?php
}
add_action('wp_footer', 'scrolling_header');

Save the changes.

In all methods, you'll need to add the following HTML code to your theme's header.php file:

<header id="header">
  <div class="title">Your News Title Here</div>
</header>

This will create a scrolling news title header that changes every 5 seconds. You can adjust the animation speed and interval to your liking.

NewsBreakers

Add header news title scrolling wp

header.title.scrolling {