[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

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

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
Ashraf Hassanein
Asked:
Ashraf Hassanein
  • 2
1 Solution
 
gr8gonzoConsultantCommented:
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
 
Ashraf HassaneinAuthor Commented:
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
 
James RodgersWeb Applications DeveloperCommented:
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
 
Ashraf HassaneinAuthor Commented:
Finally I managed to have images in the header bar
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now