WordPress.org

Ready to get started?Download WordPress

Forums

Removing Page-Title? (26 posts)

  1. wp-beginner
    Member
    Posted 2 years ago #

    I created an own template for WordPress 3.4.1 and got the problem that WordPress automatically generates titles for every single page I create, but I don't want the page-titles as headline.

    My template bases on the "Modern Theme" for Magento eCommerce. After adapting for WordPress it consists of footer, header and index.php and a style.css without attributes for page-titles.

    Because, the headline has another styling it must be an automatic function from WordPress when I paste a title in the appropriated field of the page editor(?)

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

    You can hide it using CSS text-indent: -9999px;, which will throw it off the page but keep it available for search engines.

  3. Andrew, just out of curiosity, wouldn't display: none; accomplish the same thing? Or not?

  4. wp-beginner
    Member
    Posted 2 years ago #

    Thanks, but I'm not a pro in CSS. Where has the text-indent to get placed? Do I need to create a class for the page-title? An example would be nice if it doesn't bother? Excuse my English, please.

  5. Andrew
    Forum Moderator
    Posted 2 years ago #

    Jan,

    I've seen Esmi recently state display: none; would hide it from search engines, which I hadn't known.

    -

    WordPress-beginner,

    Are you making your own custom theme?

  6. wp-beginner
    Member
    Posted 2 years ago #

    Yes, I make my own custom-theme. As I mentioned before I addapted an online-shopping theme from Magento by splitting it from an index.html into php-files. I did this for my shop and because Magento isn't the best management-system for text content pages. So the end result of my website currently consist of two sites: a WordPress-blog for static pages and a Magento-site for the shop-area.

  7. Andrew
    Forum Moderator
    Posted 2 years ago #

    Add the styles into your style.css file, at the bottom.

  8. wp-beginner
    Member
    Posted 2 years ago #

    Eh? How should this work without further details? oO

  9. Andrew
    Forum Moderator
    Posted 2 years ago #

    I don't understand your query.

  10. wp-beginner
    Member
    Posted 2 years ago #

    I don't know how to use the text-indent coding.

  11. Andrew
    Forum Moderator
    Posted 2 years ago #

    What have you at the moment? What CSS for the text indent?

  12. wp-beginner, a link to your site would really help us volunteers provide some specific answers.

    Off topic for a minute: Andrew, I think the display: none only applies to WP Stats and that smiley. As long as the HTML is being transmitted the search engines should see the title even if CSS hides it. But as I'm not 100% sure I've asked around for some clarification and I've hardly ever given search engines much thought (more the pity, shame on me).

  13. esmi
    Forum Moderator
    Posted 2 years ago #

    Google honours display:none; as far as I am aware. In many situations, that doesn't matter (and may even be desirable) but with page titles where you want to keep the seo-juice, negative text indenting or off screen positioning is much better. These techniques also ensure that the page title is available for screen reader users who may rely on this kind of info.

  14. wp-beginner
    Member
    Posted 2 years ago #

    My CSS is comprehensive. There are several positions for text-indent. For example:

    .block-layered-nav .block-title {
        background: url("images/bkg_block-layered-title.gif") no-repeat scroll 0 0 transparent;
        border: 0 none;
        height: 13px;
        margin: 0 0 6px;
        overflow: hidden;
        padding: 0;
        text-indent: -999em;

    or

    .header .logo strong {
        font-size: 0;
        height: 0;
        left: -999em;
        line-height: 0;
        overflow: hidden;
        position: absolute;
        text-indent: -999em;
        top: -999em;
        width: 0;

    That doesn't help you, eh?

  15. Andrew
    Forum Moderator
    Posted 2 years ago #

    Your CSS for text-indent looks correct, however without a link to the relevant web page, or Pastebin.com of your HTML for that page, it is difficult to find which selector is correct.

    Thanks Esmi and Jan for the SEO discussion, noted.

  16. *Nods* Thanks Esmi. ;)

  17. wp-beginner
    Member
    Posted 2 years ago #

    As I mentioned before it was originally a theme for Magento with lots of shopping boxes and options. (Which you can edit via xml-files - Magento is quite complex.) So there is no coding for the wp-title if you mean this. I didn't change the CSS of Magento it wasn't necessary for using it in WordPress.

  18. wp-beginner
    Member
    Posted 2 years ago #

    Yes, "selector". I didn't find the word. :-P
    Showing the website? What can I do, it's only a localhost...
    Wait a moment and I try to reduce the coding concerning the main content.

  19. Andrew
    Forum Moderator
    Posted 2 years ago #

    On viewing the web page, right click (assuming you're on Windows) and select 'View source'. The new pop-up window provides the HTML. Copy and paste it all into http://pastebin.com and send us the link.

    Some instructions on how to use Pastebin
    http://codex.wordpress.org/Forum_Welcome#Posting_Code

  20. wp-beginner
    Member
    Posted 2 years ago #

    So here is the header.php:

    <body>
    <div class="wrapper">
    	<div class="page">
            <div class="header-container">
                <div class="header"><!--HEADER-->
                    <h1 class="logo"><!--LOGO-->
                		<a href="******" title="******" class="******">
                		<strong>******</strong>
                		<img src="<?php bloginfo('template_directory'); ?>/******" alt="******" /></a>
                	</h1>
                    <div class="nav-container"><!--NAVIGATION-->
    					<ul id="nav">
                        	<li class="level0 nav-1 first level-top parent">
                            	<a href="******" class="level-top">
                            	<span>******</span></a>
                            </li>
                            <li class="level0 nav-2 level-top parent">
                            	<a href="******" class="level-top">
                            	<span>******</span></a>
                            </li>
                            <li class="level0 nav-3 level-top">
                            	<a href="******" class="level-top">
                            	<span>******</span></a>
                            </li>
                            <li class="level0 nav-4 last level-top">
                            	<a href="******" class="level-top">
                            	<span>******</span></a>
                            </li>
                            <li class="level0 nav-5 last level-top">
                            	<a href="******" class="level-top">
                            	<span>******</span></a>
                            </li>
                            <li class="level0 nav-6 last level-top">
                            	<a href="******" class="level-top">
                            	<span>******</span></a>
                            </li>
                    	</ul>
                    </div>
    			</div>
                <div class="quick-access"><!--QUICK-ACCESS-->
    				<p class="welcome-msg">Herzlich willkommen in unserem Online-Shop!</p>
    				<ul class="links">
    					<li class="first">
                        	<a href="http://localhost.de/magento/index.php/customer/account/" title="Mein Benutzerkonto">Mein Benutzerkonto</a>
                        </li>
    					<li>
                        	<a href="http://localhost.de/magento/index.php/checkout/cart/" title="Mein Warenkorb" class="top-link-cart">Mein Warenkorb</a>
                        </li>
    					<li class="last">
                        	<a href="http://localhost.de/magento/index.php/customer/account/login/" title="Anmelden">Anmelden</a>
                        </li>
    				</ul>
    			</div>
                <div class="top-bar"><!--TOP-BAR-->
                	<form id="search_mini_form" action="http://localhost.de/magento/index.php/catalogsearch/result/" method="get">
    					<div class="form-search">
    						<label for="search">Suche</label>
    						<input id="search" type="text" name="q" value="" class="input-text" maxlength="128"/>
    						<button type="submit" title="Los" class="button"><span><span>Los</span></span></button>
    						<div id="search_autocomplete" class="search-autocomplete">
    						</div>
    						<script type="text/javascript">
    							//<![CDATA[
    							var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
    							searchForm.initAutocomplete('http://localhost.de/magento/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete');
    							//]]>
    						</script>
    					</div>
                	</form>
    			</div>
    		</div>

    Here is the index.php:

    <?php get_header(); ?>
    	<div class="main-container col1-layout">
    		<div class="main">
    			<div class="col-main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       <h2><?php the_title(); ?></h2>
       <div class="entry">
          <?php the_content(); ?>
       </div>
    <?php endwhile; endif; ?>
    			</div>
    		</div>
    	</div>
    <?php get_footer(); ?>

    The footer.php:
    `<div class="footer">
    <div class="f-right">
    <img src="<?php bloginfo('template_directory'); ?>*****" class="*****" alt="*****"/>
    </div>
    <div class="f-left">

    <ul>
    </ul>
    <ul>
    <li class="last"><a href="*****">*****</a>

    <li><a href="*****">*****</a></li>
    <li><a href="*****">*****</a></li>
    <li><a href="*****">*****</a></li>
    <li><a href="*****">*****</a></li>
    <li><a href="*****">*****</a></li>
    <li><a href="*****">*****</a></li>
    </ul>
    <ul class="links">
    <li class="first last">
    <a title="*****" href="*****">Kontakt</a>

    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>`

    And here the style.css. I tried to compile the important ones but there is still a lot of redundant coding:

    [CSS moderated. Please use a pastebin.]

  21. Andrew
    Forum Moderator
    Posted 2 years ago #

    Can you Pastebin.com the HTML of the page and state which title you want 'removed' ?

  22. wp-beginner
    Member
    Posted 2 years ago #

    I never did that before, give me some time, please.

  23. Andrew
    Forum Moderator
    Posted 2 years ago #

    Some instructions on how to use Pastebin
    http://codex.wordpress.org/Forum_Welcome#Posting_Code

    On viewing the web page, right click (assuming you're on Windows) and select 'View source'. The new pop-up window provides the HTML. Copy and paste it all into http://pastebin.com and send us the link.

  24. wp-beginner
    Member
    Posted 2 years ago #

  25. Andrew
    Forum Moderator
    Posted 2 years ago #

    Try using this CSS

    .main h2 {
     text-indent: -9999px;
    }
  26. wp-beginner
    Member
    Posted 2 years ago #

    Thanks, it works, but there is still an offset after caoding this.

Topic Closed

This topic has been closed to new replies.

About this Topic