How to change the logotype text on WP Premium theme by an image and make it clickable?

If this article is useful for you, please, consider to retribute. Thanks

For those that use the Free WP Premium developed by R.Bhavesh, here goes a tip how to change the text logotype for a logotype as image and make it clickable.

In the folder wp-content/themes/wp_premium (or free_wp_premium) there is a file called header.php. Open the file header.php into your preferable PHP editor and if there wasn’t no change in your code yet, you probably will find on the line 26 the original code below:

26
27
28
<div id="header-in">
       <p class="title"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
       <p class="description"><?php bloginfo('description'); ?></p>

Now, replace the whole code shown above by this code shown below, but it still needs some changes:

26
27
28
29
<div id="header-in">
       <p class="title"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
       <p class="description"><?php bloginfo('description'); ?></p>
       <a href="http://yoursite.com/address_to_send_when_clicking_on_logo.php"><img src="http://yoursite.com/wp-content/themes/wp_premium/images/yourlogotype.gif" alt="text to shown at tiptool when mousing over the logo" /></a></div>

On the line 27 replace what is between quotes at href= by the address that you wish to send the visitor when clicking on your logotype (use http://). Still on this line, replace what is between quotes at src= by the logotype image address at your server (use http://). Continuing on the same line, replace what is between quotes at alt= by the text you want to show up when the visitor mouse over your logotype.

Salve the changed header.php file and the created logo.gif and send/update them to your server.

The gif size of your logotype can be 627px x 95px, not obligatory this size. By the way, don’t forget that the image will use the bottom and upper lines to follow the theme design, so use as reference the file headerbg_red.gif to check these line positions, in case you’re using the red theme, otherwise select the appropriate color file.

Now we need to hide the previous title and description that were in text format, but we are going to leave the code to allow the search engine to recognize them. Now, in the same folder where we worked with the file header.php you will edit the file style.css. Open the file style.css within your PHP editor and if there wasn’t any change in the original code, probably the codes that need to be changed will be on the lines 361, 365 and 373. Add right after the opening braces add the command display:none as shown below. Don’t forget to include the semicolon and a space after the command:

361
362
363
364
365
366
367
368
369
370
371
372
373
#header-in .title { display:none; margin:0px; padding:15px 10px 5px 10px; width:590px; float:left; }
 
 
 
#header-in .title a { display:none; text-decoration:none; font-family:tahoma; font-size:33px; font-weight:normal; margin:0px; padding:0px; }
 
 
 
 
 
 
 
#header-in .description { display:none; clear:both; font-family:Arial, Helvetica, Sans-Serif; font-size:12px; font-weight:bold; margin:0px; padding:0px 10px 4px 15px; width:850px; }

There you go! Now, save your style.css file and its done.

Good luck in your changes.

If you think that some article from iLucato was useful, help ilucato by contributing here with the amount you think is fair for the help you have received and incentive to create more videos and articles. Thanks in advance..

Filed Under: Themes

Tags:

My most recent stock images on Dreamstime.








RSSComments (2)

Leave a Reply | Trackback URL

  1. -Mors-Aggregator- BRAZIL Mozilla Firefox Windows says:

    Lucato, a solução que você apresentou aqui parece rápida e fácil; NO ENTANTO, não é recomendável.
    Substituir o texto de título de um blog por uma imagem o torna invisível em mecanismos de busca, como o Google, uma vez que o título, geralmente definido por uma tag de cabeçalho, como ou , às quais geralmente estão atribuídos metadados – principal fonte de informação dos mecanismos de busca sobre as páginas que eles incorporam – é o primeiro item que os sites de busca procuram para reconhecer uma página.

    Existe uma forma de tornar o título em texto invisível e, desta forma, sobrepor uma imagem, mantendo o texto no código e assim permitindo que sites de busca o reconheçam. É muito simples: basta encontrar, na folha de estilos CSS, a parte onde está localizado o título do blog. Aí é só inserir, no final da classe ou do id, o seguinte comando:

    display:none

    • Oi Mors. Realmente se o usuário não utilizar nenhum plug-in SEO isto pode ocorrer. Muito obrigado por alertar me. Já fiz a aleração necessária no artigo acima adicionando sua dica para alterar a folha de estilo e manter o código do título e descrição no arquivo php. Muito obligado pela participação.
      Um grande abraço e bom fim de semana.

Leave a Reply

notify me when a reply is posted.