My Mystique Theme Modifications

Mystique is one of the top most free theme used for wordpress. It is bundled with many inbuilt features but still people like me are looking for Mystique Theme Modifications to suit there needs.

So here i am listing few Mystique Theme Modifications i made to this theme.
lets take a look at all of them one by one. I am listing only those changes that i have implemented in my blog, any changes can be made to it. If you are looking for any modifications then post a comment and i will try to solve your problem.

1) Mystique theme navigation menu mousehover effect

Add below javascript lines to header.php file in
Admin -> Appearance -> Editor and select header.php from right panel. and add below javascript.

But before that make sure that jquery.js in included and you are adding this code after than.

  jQuery(document).ready(function() {
    jQuery(".navigation li").mouseenter(function(){jQuery(this).addClass("active");});
    jQuery(".navigation li").mouseleave(function(){jQuery(this).removeClass("active");});

This will add on mouse-hover background change effect to Mystique theme navigation menu.



2) Change post tags style on Mystique theme index page

.post-tags a{
  background : #EEEEEE;;
  padding : 1px 2px 1px 2px;
  color : #5E5E5E;
  -moz-border-radius : 3px;
  text-decoration : none;
.post-tags a:hover{
  background : #FA8C2D;
  padding : 1px 2px 1px 2px;
  color : white;
  -moz-border-radius : 3px;
  text-decoration : none;


3) Mystique theme change text selection color

By default text selection color used by browsers is #0A246A (Navy)
we can change this by adding some CSS hacks.

::selection {
    background: #C2DC15; /* Safari */
    color : black;
::-moz-selection {
  background: #C2DC15; /* Firefox */
  color : black;


4) Next and prev post name link

.single-navigation a {
    background-color: transparent;
    border: 0 none;
    color: red;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 4px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #FFFFFF;


5) Add Facebook Like button to top navigarion bar

One of the user (Johan Svensson) of this blog asked me about this and i really found his modification useful so i have implemented this on this blog and also want to share this modification with you.

Go to Admin Panel -> Appearance -> Advanced
and scroll down to “User functions” section and put below code

function mymenu(){
echo '
  • '; } add_action('mystique_navigation', 'mymenu'); ?>

    6) Mystique wordpress theme language translation

    You can translate Mystique theme to spanish or any other language. Tale a look at below urls.
    Mystique theme for WordPress in Spanish – Geektual
    Translating a WordPress theme « Digital Nature

    About Amit

    Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 7+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.


    1. Sam Arora says:

      I seen this article before some days in [Blocked]
      and I am using that tips. You are using same concept. :evil:

      • Thanks for pointing this out :D , and sorry to say that you have not gone through any of the articles properly. because changes i have suggested are not listed on that blog, i have taken care of that. and talking about “using same concept” there are already “About 1,39,000 results” for “mystique theme modifications”.

    2. Sam Arora says:

      OK My mistake :d
      Why you removed my link … and also you change my email address. Either delete my comment or show as I written.

    3. I was wondering if you know a way to make it so that it doesn’t say the number of comments on the header of a post, but instead just says “view comments” or something similar. I use an add-on that allows facebook comments that don’t add to the total, and I think it just looks tacky the way it is.

      • just add below javascript in footer.php, this will solve your problem

        <script language=”JavaScript”>
        jQuery(document).ready(function() {
        jQuery(“p[class=’comments alignright’] a”).each(function(i){
        jQuery(this).text(“view comments”);

    4. Nice tricks. I was looking for it.

    5. Please help… I took same theme, but can’t find how to fix Navigation Tweeter icon on the header of the page to go on my page, not on default wordpress tweeter page… My brain will explode… :) Thank you…

    6. Hello there Amit,

      I have a question about Mystique theme that I’ve been trying to solve for a few hours now but I can’t seem to find out how… I’m trying to make the “home” button in the navigation bar to say something different like “news”! I don’t mind the picture it has on the side, in fact I like it there, I just want to change the word!
      Can you make any suggestions as to how to do that? Also, is it possible for the button to link to the homepage of my website instead of the homepage of my blog? (I installed wordpress on a subpage of my website)

      Thanks a lot for any input!

      • @Shandy : Go to admin panel -> appearance- >editor and open core.php, go to line number 318 and
        replace <?php echo get_settings(‘home’); ?> with “” and
        replace <?php _e(‘Home’,’mystique’);?> with <?php _e('News !','mystique');

        repeat the process for line number 320. this should work…i havent tried it on my blog, so if it doesnt work let me know.
        Note : Before making changes, take a backup of core.php and then only edit the code.

    7. Thanks Amit! Worked great! :)

    8. I’m looking for something to auto-resize my images/youtube fragments but to keep aspect-ratio via CSS or sortlike for Mystique theme.


    9. hey,
      I want to know how to add more sidebars and navigation menu bar in mystique theme. Please, its urgent!
      My whole website has stopped on it. :(

    10. 1) Mystique navigation menu mousehover effect
      What is “jquery.js” , how can i confirm that “jquery.js” is included ? How can I adding code , Is just adding the highlight words ??

      All the code have highlight words, Is copy all and adding it or just add highlight words ???


      • jquery.ja is javascript framework, for javascript programming ( if u want to check if jquery is included in ur page goto view source and find “jquery” if u find something then it means its included in ur page or simply post ur blog url here and i will tell u if its included or not.

    11. Hi.
      I’ve just updated my site to use the mystique theme, which runs perfectly in another blog I have, and I have this problem:
      -> The RSS/Twitter buttons don’t move on mouseover, the Page Controls don’t appear where they should be and the widgets at the bottom of the page aren’t shown unless I use only one. Even when in the options page, the scroller which controls the sidebars width isn’t there, so I can’t change anything.
      I guess it is something connected with JQuery or JS, but I don’t know how to solve it.
      Could you, please, help me.

      • can u please post ur blog url here and i will have a look at it or disable all the plugins and see if it works for u.

    12. Thank you Amit, but I’ve just solved it. I deleted and reinstalled the theme and the JQuery lib and now everything seems OK, Nevertheless, have a look at
      Thanks again.

    13. Thanks for your tips.
      Also I have done modifications in Mystique Theme
      40+ Most Wanted Mystique Theme Modifications

    14. In my menu effects are not working… I want to get menu to get fadin and fadeout effects

      • If you have firebug then please check if there is any javascript error. if not then please send me your blog link and i will solve your problem.

    15. Thanks for your quick reply. No there is no javascript error. here is my link. Plz check it

      • Solution that i have provided will not work for your blog…because its not “Mystique” theme, you are using some diff theme/ custom theme. well no problem i will take a look at it and will see if i can find any workaround for you.

    16. I have gone through it, it is the mystique theme.

    17. Really nice modifications, I just made a spanish translation for this theme in case you or your visitors can use it, it really suits the context. ->

      Btw, didn’t notice the like button till I read about it, really nice.

    18. Hello,
      this is a nice tutorial, and I have a question..?
      how do i change default sidebar without changing nice top jquery navigation, i want to add more widgets, :(

    19. yahooooooooooooooooooooo
      I found it…. 8) 8) 8)

    20. I would like to change total language of my website. like heading, Menu, catagory and all. I hv been able to change some languages . But my heading, menu & some other are being in English. I want to set up in Bangla language. Can you plz help me for doing it?

    21. Hi,
      I,ve a problem with mystique.
      Images: When I open an image as a lightbox I can only refresh the browser to close it.
      The same proble happens when I try to upload image from front-end-editor (do you know?). I can only refresh the browser and image doesn,t show but it,s uploaded.

      Thanks a lot

    22. I am unable to change the company name in the footer.php. When I go to themes/editor and click on footer.php the placeholder name that’s in the footer now is not in the html of footer.php. please advise how to fix this.

    23. i’m trying to change “Next and prev post name link” colour…but its not working

    24. How do I disable commenting on pages?
      I looked in the page file and comments file… totally a beginner with coding stuff…

    25. Hey Amit,
      I have 2 problems.

      1) How to remove the hover feature on the navigation bar? i mean, i dont want the mouse to show ‘home’ when i put my mouse point on Home on my navigation bar. I want to remove it for all the things on my navigation bar.
      2) How did u put a “Notify me of followup comments via e-mail.” thing? Which plugin should i use?

      My site address is
      THANKS in advance.

      • 1) Praveen please read reply to “Shandy” that would help u.
        2) I m using “Subscribe to Comments Reloaded”

        • i have read it. but it shows only the way to change the mouseover for the home navigation. i want to change the mouseover for the other ones like the way u removed the mouseover for ur contact page.

          • I have added contact us page from Admin->Appearance->Mys settings->Advanced->user functions and then custom function
            function mymenu(){
            echo 'Contact
            add_action(‘mystique_navigation’, ‘mymenu’);

    26. hello
      how did you add the linkedin, facebook.. icon on the mystique theme on the top of the menu navigation?
      thanks a lot

    27. Hey,

      great post! But how do you get a background for the wigdets in the right sidebar?


    28. Hi Amit,

      Is it possible to email me your header codes? And please tell me what you think about my page. Thanks in advance.

    29. Hello, Amit. Nice tutoring you got here, but can I ask you some question? I got this problem with the header . My website is 90% nearly finish but I’m having this problem with hover mouseover thing. I use Photoshop to create my own logo and using Dreamweaver to make a mouseover on my logo, but the thing is how can I put this hover logo in to this theme website? I’m not good with the coding, but I hope you can help me. Pleaseee. Thank you :D

    30. Hey.. any idea how we can use google custom search with Mystique..

    31. Hello sir, thanx for such a great post but i am having a problem with my website. i am not getting mouse over effect in navigation menu and social networking icons. can you please help me with that?
      Here is my website

    32. I tried to add the Google +1 like the LIKE from Facebook (see Mod. 5).

      Guess I made a mistake because now the website is completely down including admin panel. Had to rename the theme folder.

      Could someone please tell me in which file I find the code added here: Admin Panel -> Appearance -> Advanced
      so I can remove it and use this cool theme again?

      Please help – thanks a lot, Alex

    33. hey. any idea how to remove those stupid table css in the mystique theme which comes automatically to any table posted.

    34. Hello Amit,

      I wonder, do you know how to put like adrotator built with jequery on homepage ( ) ?


    35. Hello, I installed Mystique but the menu does not appear, it loads and then is replaced by the bar, as shown in the image:, please, help me!

    36. Hey I wanted to know how to put an google ad next to my logo on my website.
      Where it says Bringing Rock News To You. I want my google ad to go there.

    37. Hi Amit ,

      Can you please help me to add a second navigation bar on Mystique theme.

      Thanks in advance.

      Suhanesh Madav

    38. I tried on my localhost but not getting succeeded.If you tried already can you please share the code.

      • Yes all the changes are working fine at my end…i haven tested it on localhost.

      • Hey Suhanesh, there is new version of Mystique Theme – Mystique 3.0, which allows you to add navigation bar at three different positions (Above Title, below title and at footer), I am using new version and added navigation bar at three different positions. 8)
        So try new version of Mystique Theme, also it provides a lot of feature than version 2.4.3 :wink:

    39. I have inserted images in my slideber, but there’s a problem that, i want to reduce the space between two images, but i can’t do it, can u plz help me to do it?

    40. Hello, please I have a problem with mystique. When I activate Jquery the Read More Option on Home Page just shows Loading then noting when I click on it. It doesn’t load any page. So I tried to disable Jquery and it It works, but I have the comments disabledf when I turn it off.

      • Just had a look at your page…and didnt found load more button there…can u please help me ?

        • Thanks for the quick response, I solved the problem by deleting the More section in the jquery.init.php page in the Mystique Theme editor. Thanks.

    41. plz tell me how to inegrate google ads in this theme .. in between post text

    42. My Mystique Extra Nav plugin is not working since the upgrade at my blog, please help me! Thanks,

    43. Hi..
      Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

    44. Thanks Rajesh, I will check out your link and keep you posted!

    45. Hello Amit,

      Thank you for all these tricks.
      Do you know how to change the position of the comment box to put it before the first commentary in order to help visitors who read an article to comment more easily?

      Thank you in advance,



      • Hello fred,

        It can be done like this, Go to
        1) Admin -> Apppearance -> Editor
        2) Take a backup of file that u r going to edit. (Important step) 3) Select “comment.php” from list of files
        4) Then find “<!– comment form –><div class=”comment-form clear-block” id=”respond”>” and and start copying the code up to “</div><!– /comment form –>” (note the slash)
        5) Move selected code block from there and put it before “<div id=”comments-wrap”>”
        6) Save the changes and check

        Please dont forget to backup. let m eknow if this works.

        • Hi Amit,
          Thank you very much for your quick response.
          You’re a nice guy

          I just tried and it:
          –> works fine for Firefox
          –> with internet explorer the comment box goes back, but we can see hardly the comments on the right of the comment box like if it was a second small width column of a table.

          So the interpretation of the change from IE isn’t OK
          The solution seems not far :)

          Thank you,


    46. Hi Amit

      I want to add image with link to internal page in sidebar. Kindly tell me how can i? I also want to change favicon guide me as well.


    47. Hi Amit,

      Maybe you would know the answer to this. I’m simply trying to add a Facebook Like Box to my sidebar via widgets. I got the code from FB, but when I paste the iFrame code into my text widget it comes up as raw code only–no FB image shows. Have you experienced this same issue?


      Shawn :)

    48. If you could email me with any pointers about how you made your blog site look this cool , Id be thankful.

    49. Yes indeed. It is Thank you my friend!

      • seems like mystique is changing “<” tag to “>” so that browser is not able to parse that code and print “Like” button insted its printing code as it is…do u have mystique latest version ?? please send me so i can install on my machine and see what could be done.

    50. Which files would you like?

    51. I just downloaded it right from here:

    52. You’re right! That was strange–I kept copying and pasting new code, but for some reason it kept reverting to the old code. So I put the text widget back, then dragged it again, added the new code, and it worked! Thanks, Amit! You’re a bonafide Mystique genius! :) :)

    53. How do I insert the google analytics code in the new theme – mystique extend?

    54. Can you tell me how you put that Facebook like button on your Navigation bar? thanks :)
      ps: i dont mean the extra nav icons

    55. Hi. Thanks for this infos. I am very wondering your header.php style. Ordered by categories and when mouse-overed showing post number. Please help me with this. Im beginner and sorry for my english… Thank you in advance!

    56. Trouvez comment redonner une nouvelle vie a vos meubles et objets grace a de simples serviettes jetables !!!

      • C’est l’homme très vieille idée ….. J’ai idée encore meilleure, pouvez-vous faire de la maison pour moi en utilisant les allumettes de sûreté? Si vous ne pouvez alors s’il vous plaît me contacter par email, car ce n’est pas au bon endroit pour parler de choses inutiles comme “serviettes jetables”, “vous”. J’espère que vous comprenez.

    57. Hello! Can you tel me how did to added extra links (Catagories) and Contact page to your Navigation Bar? (Home, Ajax, CSS….)…
      I would love to have that!

    58. How did you made the Navigation bar floating?
      And how do I add links to navigation bar?

      • 1) Add this javascript code to your index page to make floating navigation bar

        2) For extra links use “extra nav” plugin

    59. We are using the Mystique 2.6 Theme for our website. We created a different page for Blogs, however when we post a new entry it shows up on our home page. We were wondering how to post entries on the blog page. I was trying to find the home.php file to change the page name to something else and change the settings under the Reading tab to static, but I was unable to. Currently, there is no option in the Reading settings page for “Home” and if I create a new page, the Home page is still there. We like our home page, we just want to be able to post multiple posts on the Blog page, and have a opting where the post only show up on the Blog page.

      Please let us know what we can do to change this


    60. Hi
      My site is currently under construction and I wke the site-title logo and tagline centred. Currently the logo text and tagline appear in a single row but justified left. I have tried doing this in css but seem to end up with the logo centred but the tagline appears on the line below, so I have reverted back to the original css.
      Can you help please?
      Many thanks

      • Just a quick solution, try to find the header page and find and add style=”margin-left:10%”, so it will become . let me know if this works.

    61. i am also using same theme..great modifications

    62. can you tell me how can i use a very small image as background and set it to repeat like tiles?

    63. I have disabled comments completely in every place I can find but the comments form and tab still appears on the single post pages but with a Comments Closed message and the button for the Comments Feed. Can I remove the whole of the comments form, message and feed button as my client doesn’t want to use the comments facility at all.

    64. Hi.

      1) I know how to change the font size of the navigation menu, but then the grey shaded background stays the same size. How do I resize it?
      2) How do I decrease the space between the navigation menu and the main content box?

      I need the CSS please, I’m not hosting my own blog. Thanks, appreciate any help.

      • @mark : which version of mystique r u using ? i’m asking this because i have done this using “User css” option in mystique 2.x, this option is not available in 3.x. So if u are using 3.x version then i need to install the 3.x version and then only i can tell u solution.

    65. Hi Amit, I’m new to blogging, I’ve chosen the Mystique theme and your site has helped me very much! I’m having a small problem with the comment box – the text such as -name, email and url – like above on your comment box is invisible on m,y blog. Any ideas on why this text has disappeared. Any help is highly appreciated!X

      • I think you are logged in to admin panel and also opened ur blog in same browser (in another tab), is it ??
        Open your blog in another web browser and it will be visible.

    66. Hello brother!
      i recently uploaded mystique to my WordPress but its showing pages in the top header instead of the categories.Have a look to my website and please help me !

      • i just saw ur page, i can see there is error due to “wp-smushit” plugin. try to remove the plugin and run, if that doesnt solve ur problem then reinstall wp again.

    67. I have just released but would like to make a change to how the tag is generated. At the moment the system uses the site title plus the page title that I have input into the All-in-one-SEO page title field to construct the tags. I was however expecting that the All-in-one-SEO defined title would be the sole content of the tags. Do you know how I can remove the site title from the tag generation. I am not sure whether this a theme-generated issue or an issue associated with WordPress defaults or the plugin defaults?
      Any advice would b e greatly appreciated.
      Many thanks
      Joan Ward

    68. Hi
      Sorry Amit – I have just realised it is an All-in-one-SEO and I have resolved it.

      • Sorry joan, i found both of ur comments in spam…so i wasnt able to look in to it…anyways, glad to know you solved it.

    69. Really Nice Article and Nice Blog Amit. I am very much impressed with your programming skills. Hope I will learn something from you.

    70. Hi
      I am trying to set the background colour of the text widgets on my site – I want 3 text widgets each of which has a different background colour and each having with white text. How would I set that up – I have tried using tags and tags but that doesn’t seem to have any effect.
      Any help would be appreciated
      Thanks, Joan

      • Hello Joan, sorry for being late, actually ur comment was marked as spam. can u provide url of ur site and which widgets u want to apply colors. so i can have a look at it and suggest some css or javascript solution.

    71. Hey there,

      I love what you did with your site! I’m trying to get my nav bar to feature categories instead of pages. I would also like the nav bar to follow the page like yours!

      Could you please tell me how you did this? Is there a way to make the nav bar black?

      • To make “following” nav bar u need to make changes to the footer.php, do u know programing ? i will send you code to ur email…try that code if that doesnt work let me know.

    72. Hi
      I have used some of your mods on my site with great effect and would like some additional advice with respect to the main menu bar – my client would like the menu items to fill the full width of the menu bar, but I am not able to do that and find that I always end up with a blank section after the final item divider. Is there a way to make this happen, I presume that in addition to making the text items fill the full menu width I would also need some mechanism to disable the appearance of the final divider that appears to the right of the text…does that make sense?

    73. Hi, Amit i have little problem in version
      The social media icons is not displaying menu bar but link is already there.what is solution? please help

      • Uttam, Sorry for the late reply, Did u set icon settings like ur facebook fan page url, twitter account name etc. I am sure this is the problem.

        • First thanks 4 ur recent comment. I drag & drop icon from inactive to active in social media icon option & also set url there. other setting is necessary ???? If necessary where to edit sir??

          • Hello sir,
            maine aap ke email address me mera username,password aur site name send kardiya hu pls…mera social media icon menu bar me show karadijiye.
            Yours sincerelly

    74. pls..tell me css code or edit option to display icon in bar. All is done only icon doesn’t display in bar, icon link is already in bar.

    75. Hello sir,
      maine aap ke email address me mera username,password aur site name send kardiya hu pls…mera social media icon menu bar me show karadijiye.
      Yours sincerelly

    76. how to add costom picture widget ??? How to fix link address in mystique theme?

    77. #header {
      background: url(;
      background-repeat: no-repeat;
      background-position:75% 3%;
      To use this css i added costom pic in header. But how to fix image link address?

    78. I am using Mystique theme and I am trying to do a small trick. In the Mystique settings > Content > Post Previews I have chosen to show ONLY full content instead of excerpt. So elements that I do not want to show are Title, Info Bar, Tags.

      The next step I am trying is to hyperlink the entire content displayed as preview to the respective post page.

      So for example, if I am in the home page I should be able to see the respective post contents which will be hyperlinked to the respective posts.

      Can anyone please shed some thoughts on how to do this?

      Thanks in advance!

    79. Thanks a lot for the mouse hover effect…This is one of the best WP themes :D

    80. how to fix this images link address means how to link this image to

    81. Hello, does anyone know how to make the menu bar black in mystique 3x? I’ve tried the #access and it doesn’t do anything. Also the photo gallery slider I can’t get to work. I tried enabling it in settings and checked all items, and it doesn’t show up. Thanks

    82. Hi sir,

      How can I modify to get side bar category design?
      Please see the link below to see screenshot. I can’t think of anything to get like that. I only get plane one only.
      [link removed]

    83. How did you change the hover link color for the submenu of your PLUGINS main menu heading?

    84. Hi there Amit.
      I’m using a child theme of the Mystique under WP 3.3.1
      Just one question, how can I change the delay values for the dropdown top menu?
      Is it in a JS file? Which? Where?
      Thanks a lot.

    85. Nice tricks amit. I was looking for it. now i modify my theme. :wink:

    86. Hi Amit,
      Great post! I’m trying to do the following:
      1. I’ve been searching for a way to make the nav bar solid color.
      2. I want to make a text widget on the side bar with red background. I tried inserting this html code:
      ” ”
      But it didn’t work. Do you know any idea how to make that work?


      • Ghassan,
        1) which version of mystique u r using ? It matters lot.
        2) Resend html code again its been striped by wp and i cant see anything.

    87. SEO Company calicut says:

      I just wanted to say that your blog has been really useful.

    88. Joan Ward says:

      Can you tell me which plugin you are using to display the row of social media icons and counts that appear at the end of your posts please.

    89. I have removed the main navigation bar from view on my customisation of Mystique as my client wanted just side navigation, but I want to have the social media icons visible that normally appear behind/above the main menu bar – do you know how I can do this?
      I have used the following to hide the main menu:
      /* hide main navbar */
      #header .shadow-left{
      display: none;
      Any suggestions would be very welcome

    90. Hi Amit.
      If you’re still around, I am hoping you will solve this little mystery for me. I’d like to change the hover over colour of the navigation bar menu font, from blue to one of my choosing. None of the found coding I’ve tried has altered the format/appearance in any way. I’m using Mystique 3.3.2.

    91. Hi, hoping someone might be able to help me out. I would like to have different headers on different pages of my site. I am using the Mystique theme? Anyhelp would be greatfuly appreaciated.

    92. Hi
      I have used Mystique theme on a few sites over the last couple of years and on one of those sites my client has now asked if they can have a completely bespoke home page which has a more graphics-based navigation integrated within the body of the page. So my question is how would I leave the top navigation in place on the rest of the site but hide/remove it from the homepage so that I can put a completely bespoke homepage – is this possible?
      Any advice will be much appreciated.


    1. […] Article : My Mystique Theme Modifications css, html, Mystique theme, […]

    2. […] Similar to this I have another post How to make custom modifications in mystique theme, I guess few modification listed there arent working for latest mystique version. I will try to […]

    Speak Your Mind



    Notify me of followup comments via e-mail. You can also subscribe without commenting.