Text on featured image

Hello,

I need to add some text on featured image that I selected on each diffrent page, it’s possible? If yes how I can I do?

Thanks in advance

Hello there,

To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

        $.fn.extend({
            textToHeaderImage: function(options) {
                var defaults = {
                    maintitle: '',
                    subtitle: ''
                };

                var options = $.extend(defaults, options);

                var subtitle = function(){
                  if( options.subtitle != undefined ) {
                    return '<p class="subtitle">'+options.subtitle+'</p>';
                  }
                }

                var headerText = '<div class="header-image-text">'+
                                 '<div class="inner"><div>'+
                                 '<h2 class="maintitle">'+options.maintitle+'</h2>'+
                                 subtitle()+
                                 '</div></div>'+
                                 '</div>';
                var headerImg = this.find('.header-image');

                if( headerImg.length ) {
                  headerImg.append(headerText);
                }

            }
        }); // Function ends


        // Add text to header image on page 468
        $('.page-id-468').textToHeaderImage({
          'maintitle': 'My Text 1',
          'subtitle': 'This is my subtitle'
        });


    })(jQuery);

The new header image content is defined with this code block:

    // Add text to header image on page 468
    $('.page-id-468').textToHeaderImage({
      'maintitle': 'My Text 1',
      'subtitle': 'This is my subtitle'
    });

You should adjust the page ID number of the desired page. As in the example above, it’s 468. You can find it easily when in the editing panel of the page; in the address bar of the web browser you’ll see a URL that reads something like this: yoursite.com/wp-admin/post.php?post=468&action=edit. Or for easier, you can use this plugin: https://wordpress.org/plugins/reveal-ids-for-wp-admin-25/.

  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-image-text{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      text-align: center;
    }

    .header-image-text .inner{
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    .header-image-text .inner > div{
      margin-top: 40px;
    }

    .header-image-text .maintitle{
      color: #fff;
      font-size: 26px;
      line-height: 30px;
      font-weight: 700;
      margin-top: 0;
      margin-bottom: 10px;
      display: block;
      width: 100%;
    }

    .header-image-text .subtitle {
      color: #fff;
    }

Once finished, you’d need clear all applied cache, as it usually block the recent code addition or changes to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi Kharis,

thanks for your fast reply, I tried your code and it works well.

Thanks for your help

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis