Solved

How can I add images in the menu to be linked to pages?

Posted on 2014-02-02
4
294 Views
Last Modified: 2014-02-20
I want to change the title of the page to be an image instead of text, and display this image in the menu, how can I do so?
0
Comment
Question by:Ashraf Hassanein
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 39828610
You need to be a little more descriptive. Typically you just need to update the template to change how the title is displayed. I'm not sure what you mean about displaying the image in a menu, though...
0
 

Author Comment

by:Ashraf Hassanein
ID: 39828797
For Example I have a page where I shortcoded the twitter feed in it, I want this page to have the twitter logo as a title rather than the text twitter and to be displayed in the menu as twitter logo rather than the twitter is that possible?
0
 
LVL 25

Accepted Solution

by:
James Rodgers earned 500 total points
ID: 39832263
take a look at the solution here, also below

http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28121632.html

explains how you can set up an image in a menu as a background and use jQuery to control the content

In your theme go to the menu editor under Appearance
Admin Site| Dashboard > Appearance > Menus

on the menu screen is an option for a "custom" menu item
add a custom item with the url as the  url to yor twitter and the label as twitter-logo
add the custom menu item to the menu
on the "Screen Options" tab, upper right hand of the admin screen, make sure you have css classes check off
open the menu item and add this class to the menu item "twitter-logo-menu"
save the menu


add this to your css

.twitter-logo-menu {
height:999px
width:999px
}


make a js file named logo.js
in that file have

$jQuery('.twitter-logo-menu').html('<a href="twitter url"><img src="path/to/twitter-logo.jpg" width="999px" height="999px" alt="Follow us on twitter" /></a>');
$jQuery('.twitter-logo-menu a').css('visibility','visible');

Open in new window


where 999px is the actual dimensions of the image

to load the js add this to functions.php, assumes you put logo.js in a directory called js in your theme directory
wp_enqueue_scripts('logo-js',get_bloginfo('template_directory'). '/js/logo.js', array('jquery'),1,1);

Open in new window

0
 

Author Closing Comment

by:Ashraf Hassanein
ID: 39872647
Finally I managed to have images in the header bar
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
There is a massive demand for content on the web right now, and it doesn't look like it's going to stop any time soon. But, if you are running a business blog, it's not just enough to offer your audience lots of content. It needs to be high-quality…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

634 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question