Solved

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

Posted on 2014-02-02
4
276 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
  • 2
4 Comments
 
LVL 34

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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 set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

705 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now