Header text for pages

Hi sydney theme,

as i love this theme i am again using it in my other website.hats off to your active and quick support.i need to add text to header image according to page i followed this topic to achieve this but it shows the same text on every page can u please guide me as i need to add “service” on servive page “ABOUT” ON ABOUT PAE and so on

thanks
fatima

Hi there,

To have different title on different pages, you’ll need to add the page id to the code snippet from the thread you’ve shared in above. To achieve this, can you share your site URL here? and please let me know which page that you want to add a title.

Regards,
Awan

Hi, Awan,
thanks for reply my site is in development mode i have following pages ABOUT, SERVICES , PROJECTS , CONTACT , BLOG ALL PAGES HAVE SAME TEXT IN HEADER AS shown in picture
http://imgur.com/a/tySoN

i need text according to page name like “ABOUT” “SERVICES” “PROJECTS” ETC

hope this image explains the idea what i want to achieve.

thanks
fatima

Hi,

Let me give you an example to add a title to the page. The step is:

  1. Open the page which you want to put a title
  2. right click the page then choose “inspect” http://prntscr.com/f1qt2c
  3. Open the “Element” tab > find the <body tag, from there you can see the page id. In this screen shot, the page id is page-id-2 http://prntscr.com/f1qrrt
  4. Install and activate Custom Javascript plugin
  5. Go to appearance > Custom javascript then put the javascript below:
  • assume the page id for:
  • About page: page-id-2
  • Service page: page-id-3
  • Project page: page-id-4
  • etc

Don’t forget to add a dot . prefix for the page id, example: page-id-2 should be .page-id-2

So, the code snippet would be like this:

<script>
jQuery(function($){
   $('.page-id-2 .header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: white';font-size:50px;position: relative;">ABOUT</div>');

   $('.page-id-3 .header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: white';font-size:50px;position: relative;">SERVICE</div>');

   $('.page-id-4 .header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: white';font-size:50px;position: relative;">PROJECT</div>');
})
</script>

That’s it, let me know how it works.

Regards,
Awan

Hi Awan, thanks for detailed explanation , i did as u explained but nothing happened on any page i checked the dot for page id and also checked that page id is correct but still frontend is blank …please advice

regards
fatima

Hi, can you share your site URL here?

Hi Awan,
i am unable to send you link because website is on localhost but this is the code i applied

<script>
jQuery(function($){
$(’.page-id-9 .header-image’).append(’<div style=“top: 50%; width: 100%; text-align:center;color: black’;font-size:50px;position: relative;”>ABOUT</div>’);

$(’.page-id-13 .header-image’).append(’<div style=“top: 50%; width: 100%; text-align:center;color: black’;font-size:50px;position: relative;”>SERVICE</div>’);

$(’.page-id-11 .header-image’).append(’<div style=“top: 50%; width: 100%; text-align:center;color: black’;font-size:50px;position: relative;”>PROJECT</div>’);
})
</script>

and here the red box marked i need the titles

thanks
fatima

Hmm… can’t help you much thu.
Is there any javascript error in devTools console? http://prntscr.com/f33mpi

Hi Awan,
This is shown


and this shown in "source"


i am very thankful if u help me to resolve it
regards
fatima

Hi,

According to this screenshot http://imgur.com/a/70QOq, you put the code like so:

<script type="text/javascript"></script>
jQuery(function($){
$(‘.page-id-9 .header-image’).append(‘<div style=”top: 50%; width: 100%; text-align:center;color: black’;font-size:50px;position: relative;”>ABOUT</div>’);

$(‘.page-id-13 .header-image’).append(‘<div style=”top: 50%; width: 100%; text-align:center;color: black’;font-size:50px;position: relative;”>SERVICE</div>’);

$(‘.page-id-11 .header-image’).append(‘<div style=”top: 50%; width: 100%; text-align:center;color: black’;font-size:50px;position: relative;”>PROJECT</div>’);
})

Please replace it with this:

<script type="text/javascript">
jQuery(function($){
$('.page-id-9 .header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: black;font-size:50px;position: relative;">ABOUT</div>');

$('.page-id-13 .header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: black;font-size:50px;position: relative;">SERVICE</div>');

$('.page-id-11 .header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: black;font-size:50px;position: relative;">PROJECT</div>');
})

Hi, Awan

Thanks a lot your support is amazing the code you given worked just one thing confused me that this code does not worked with custom java script plugin it worked with header and footer plugin https://wordpress.org/plugins/header-footer/ and when i tried to delete that code from custom java script plugin it will not delete. one last thing need to know can i use hex code to change the text color in that script code.

thanks
fatima

Hi,

Not sure why the script are not working with TC javascript plugin, but you already resolve it using Header Footer plugin, right?

Yes, of course you can use hex color for the text. here is for black color: #000000
or if you need another color, you can visit this http://www.color-hex.com/

Regards,
Awan