How to create a dynamic page title using PHP

php dynamic title

11,860

Solution 1

That sounds like something that jQuery would excel at:

<script type='text/javascript' src='jquery-1.4-min.js'></script>
<script type="text/javascript">
    $(document).ready(function() {
        document.title = $('h2:first').text();
    });
</script>

To modify the meta data, you would do more of the same. I strongly recommend jQuery - Novice to Ninja as an amazing way to get into great depth with jQuery.

<html>
<head>
<meta description="" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('meta:first').attr('description', $('h2:first').text());
        alert($('meta:first').attr('description'));
    });
</script>
</head>
<body>
<h2>Testing 123</h2>
</body>
</html>

Solution 2

If your h2 text is dynamically made then other parts of your web page can be dynamically created too. For example, if you have a variable $a = "My Text"

<?php
$a = "My Text"
?>
<html>
<head>
<title><?php echo $a;?></title>
</head>
<body>
<h2><?php echo $a;?></h2>
</body>
</html>

Using this technique, you can define the text of other parts of the web page.

Solution 3

For anyone looking for a slightly more dynamic method which does the meta and the title at the same time and uses some fall backs:

<script type="text/javascript">
$(document).ready(function() {
    $title = '';
    if($('h1:first').text() != '')
    {
        $title = $('h1:first').text();
        document.title = document.title + " | " + $title;
        $('meta:first').attr('content', $title);
    } else if($('h2:first').text() != ''){
        $title = $('h2:first').text();
        document.title = document.title + " | " + $title;
        $('meta:first').attr('content', $title);
    } else if($('h3:first').text() != ''){
        $title = $('h3:first').text();
        document.title = document.title + " | " + $title;
        $('meta:first').attr('content', $title);
    } else if($('.panel-heading:first').text() != ''){
        $title = $('.panel-heading:first').text();
        document.title = document.title + " | " + $title;
        $('meta:first').attr('content', $title);
    }
});
</script>

This will concatenate the generated title onto the end of your current title. It also sets the description to the same value.

You must have the description meta tag as the first meta tag in your header for this to work for setting the description meta. If this is not the case you can change the $('meta:first') selector to select the description meta tag.

I use bootstrap so the first panel-heading is my fall back case: $('.panel-heading:first'), change this to represent a appropriate desired fall back if there are not header tags on the current page.

When all else fails, this script will leave your title's value at its present value.

11,860

Author by

Stephen Meehan

I am a Freelance Designer working under the name d3creative. A web design studio based in Manchester UK. I specialise in building unique and usable Wordpress websites.

Updated on June 04, 2022

Comments

Stephen Meehan about 2 years

Hi I was wondering if anyone can help with this PHP problem.

Is it possible to use the text in a H2 tag and use that to populate the page title dynamically.

I'd also like to be able to use this same technique to add the H2 text into the meta description - Can anyone help?