Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-02-02
4
Medium Priority
?
297 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 2000 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

721 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