WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Restrict output of the_title to a cetain number of characters (4 posts)

  1. Matthew Gerring
    Member
    Posted 5 years 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?

  2. MichaelH
    Member
    Posted 5 years ago #

    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.

  3. Matthew Gerring
    Member
    Posted 5 years ago #

    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('http://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('http://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('http://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.

  4. MichaelH
    Member
    Posted 5 years ago #

    Replace:

    <?php the_title(); ?>

    with something like will print 50 characters of the title

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

Topic Closed

This topic has been closed to new replies.

About this Topic