Restrict output of the_title to a cetain number of characters

  • Resolved Matthew Gerring

    (@beatpanda)


    15 years, 9 months ago

    I have a recent posts module on my page that shows the title of the last 4 posts not displayed on the home page.

    I have a limited amount of space, so I need to know how to restrict the output of the_title() to a certain number of characters (or words, preferably), and then insert a “…” to indicate that the title is shortened, but only if the title is shortened. Can anyone help?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Look at using PHP substr.

    You’ll need to provide a link to download that plugin and a link to see the page you are using that plugin if you continue this thread.

    Thread Starter Matthew Gerring

    (@beatpanda)

    Not a plugin, and not at liberty to post the site it’s on. Here’s the code instead:

    The CSS-

    /*---:[ Previous Posts module ]:--- */

.drop ul {
	padding: 0px;
	margin: 0px;
	display:block;
	z-index:3;
}

.drop ul li {
	display: inline;
	width: 100%;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	height: 30px;
	position: relative
}

.drop ul li a {
	background-color: #FFFFFF;
	color: #FFFFFF;
	width: 100%;
	text-decoration: none;
	height:30px;
}

.drop ul li a:hover {
	background-color: #FFFFFF;
}

.drop ul li ul li a {
	color: #39F;
}

.drop ul li ul li a:hover {
	color: #30F;
}

.drop ul li ul {
	visibility: hidden;
	position: absolute;
	bottom: 10px;
	left:-10px;
}

.drop ul li:hover ul {
	visibility: visible;
	position: absolute;
	bottom: 10px;
	left:-10px;
	background-image:url(images/recent.png);
	width: 500px;
	height:100px;
	float:left;
}

.recent {
	width: 88px;
	height:59px;
	border-right:#000 1px solid;
	padding-right:10px;
	padding-left:10px;
	margin-top:20px;
	margin-bottom:20px;
	float:left;
}

.postnavbutton {
	float:left;
	display:block;
	width:28px;
	padding-top:36px;
	padding-left:1px;
	padding-right:1px;
}

    XHTML from the front page, where the “recent posts” link is-

    <div class="drop">
    <ul>
    <li>Previous Posts
    <ul>
        <script type="text/javascript">
		ajaxpage('https://www.mysite.com/?page_id=50&posts=4', 'recentbox')
		</script>
		<div id="recentbox">
		</div>
    </ul>
    </li>
    </ul>
    </div>

    Recent.php

    <?php
/*
Template Name: Recent Posts
*/
?>    

<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
?>

<?php query_posts('showposts=4&offset='.$_GET['posts'].''); ?>

	<?php if ($_GET['posts']-4 != 0) { ?>
    <div class="postnavbutton">
	<a href="javascript:ajaxpage('https://www.mysite.com/?page_id=50&posts=<?php echo $_GET['posts']-4; ?>', 'recentbox')" >
    <img src="<?php bloginfo('template_url'); ?>/images/go2.gif" alt="&raquo;" />
    </a>
    </div>
    <?php } else {} ?>

	<?php while (have_posts()) : the_post(); ?>
 	<li>
    <div class="recent">
    <?php the_title(); ?>
    </div>
    </li>
    <?php endwhile; ?>

	<?php if ($_GET['posts']+4< $published_posts) { ?>
    <div class="postnavbutton">
    <a href="javascript:ajaxpage('https://www.emrl.com/clients/sandbox/?page_id=50&posts=<?php echo $_GET['posts']+4; ?>', 'recentbox')" >
    <img src="<?php bloginfo('template_url'); ?>/images/go.gif" alt="&laquo;" />
    </a></div>
	<?php } else {} ?>

    Link to the AJAX script being used

    So I have the post titles in 88px x 59px boxes, and they all need to fit.

    Replace:

    <?php the_title(); ?>

    with something like will print 50 characters of the title

    <?php echo 'shortened title ' .substr($post->post_title,0,50) ; ?>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Restrict output of the_title to a cetain number of characters’ is closed to new replies.