Solved

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

Posted on 2014-02-02
4
283 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
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 …

813 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

12 Experts available now in Live!

Get 1:1 Help Now