Tabs appear below each other and loss styles
-
Hello,
I’ve installed WP Post Tabs a couple of years ago and It worked fine.Recently I’ve upgraded to WP 4.11 and upgrade WP Post tabs too, and now tabs appear below each other, and CSS styles seem to be lost.
This is a Link to see an example:
https://www.unitech.grupadigital.com/productos/tramix/Thanks
-
Hi @lucianoas,
I have tested the link there are JavaScript errors on that page, due to which tabs are not working. Please check and correct the below points,
1. Tabs require ui core js to work tabs, which is not properly included on the page. The correct path is /wp-includes/js/jquery/ui/core.min.js?ver=1.7.3.
2. Can you please check your current theme’s footer.php is having standard wp_footer(); hook, as this hook is required to load tabs js, If not please include it before </body> code.
Please let me know if it works,
Waiting for your response.
Thank you for all your patience.Best Regards,
Sukhada,
TabberVilla Support Team.Hi @sukhada,
Thank you very much for your response. I’ve been trying to correct the two points you mentioned. I’ve been able to fix some of the JS errors on the page but I’m not exaclty a JS expert so I couldn’t solve all of them.
Now, there are only two JS errors. You can see them here:
https://www.unitech.grupadigital.com/wp-content/plugins/wordpress-post-tabs/screen-error.pngRegarding wp_footer() now it’s on the right place.
Is it possible that a conflict with versions of jquery y jqueryui?
Thanks again
lucianoasHi Lucianoas,
I have checked the URL but, the tabs js is not included on page, there might be the issue with wp-footer hook. Can you please recheck the position of
<?php wp_footer(); ?>
hook. If it is there on right place, can you please provide us the temporary admin access details to our support mail support[dot]team[at]tabbervilla[dot]com. So that we will also take a look into the issue and try to fix it.Please let me know if it works,
Waiting for your response.Thank you for all your patience.
Best Regards,
Sukhada,
TabberVilla Support Team.Hi @sukhada,
Thanks again. I’ve re checked. What I’ve seen is that <?php wp_footer(); ?> is located just before </body> tag in the footer.php file. I think that is correct right?
I have also this code on footer.php from my previous installation inside the body tag:
<script type=’text/javascript’ src=’/wp-includes/js/jquery/ui/core.min.js?ver=1.7.3′></script>
<script type=’text/javascript’ src=’/wp-includes/js/jquery/ui/tabs.min.js?ver=1.7.3′></script><script type=’text/javascript’ src=’/wp-content/plugins/wordpress-post-tabs/js/jquery.cookie.js?ver=1.1′></script>
<script type=”text/javascript”>
jQuery(function() {
jQuery(“#tabs_0”).tabs({ cookie: { expires: 30 } });
//getter
var cookie = jQuery(“#tabs_0”).tabs( “option”, “cookie” );
//setter
jQuery(“#tabs_0”).tabs( “option”, “cookie”, { expires: 30 } );
//fx for animation
jQuery(“#tabs_0”).tabs({ fx: { opacity: ‘toggle’ } });
//getter
var fx = jQuery(“#tabs_0”).tabs( “option”, “fx” );
//setter
jQuery(“#tabs_0”).tabs( “option”, “fx”, { opacity: ‘toggle’ } );});
</script>
I’m not sure if this is correct. Thanks!Hi Lucianoas,
The latest tabs plugin uses different tabs function i.e posttabs to build tabs and requires below JavaScript file “https://www.unitech.grupadigital.com/wp-content/plugins/wordpress-post-tabs/js/jquery.posttabs.js”. It seems that this JavaScript file is not loaded on this page in footer section.
If the wp_footer hook is properly added in footer.php file and still the tabs are not working, then you can add this file in footer.php directly. Refer below code to load the JavaScript file,
<script type=’text/javascript’ src=’https://www.unitech.grupadigital.com/wp-content/plugins/wordpress-post-tabs/js/jquery.posttabs.js’></script>If the above script code i.e(jQuery(“#tabs_0”).tabs({ cookie: { expires: 30 } }); …) you have mention which is located in footer.php is hard-coded in this file? If yes please remove it as this code is not necessary for the latest version of tabs.
Please let me know if it works,
Waiting for your response.Thank you for all your patience.
Best Regards,
Sukhada,
TabberVilla Support Team.Hi Sukhada,
I appear to be having the same problem as “lucianoas” (except I just bought the pro version since I was sold by the demos) and I cant figure out why my tabs appear as stacked with no styling. literally I just installed the plugin through the “upload” instructions. No matter what skin I choose, I get stacked and loss of styles.
Probably more so than “lucianoas”, I am not jquery literate.
Please help
Hey there, Nevermind
… I just realized that I forgot to check [_] the box
Page Tabs:
[X] Enable WP Post Tabs PRO Featureforgot that I configured this up in the settings and didn’t remember to look for it on the admin post/page.
…Yes, I’m still a newbie ?? Duh!
Hi @sukhada,
I’ve tried including function i.e posttabs directly in footer.php and removed the old JQuery Code but apparently is something else because couldn`t make it work.
Maybe if you take a look into it will be better, I’ve sent the admin access to support[dot]team[at]tabbervilla[dot]com
Thank you for all your support.
Hi Lucianoas,
Thanks for providing the access details, But I am not able to update the files as they are not writable. I am getting this message “Para guardar los cambios, es necesario que el archivo tenga permisos de escritura. Visita el codex para obtener más información.”. Can you please change the permissions so that I can do some changes to fix the problem.
Waiting for your response.
Thank you for all your patience.Best Regards,
Sukhada,
TabberVilla Support Team.Hi Sukhada,
I’ve been able to modify footer.php and other several files from the theme editor but I’m not sure wich file you need to update, so now I’ve changed temporary the file permissions to writable to all the theme directory /wp-content/themes/unitech and files.
Let me know if it works now. Thank you.
Luciano
Hi Lucianoas,
I am not able to see the “Update File” button on any theme file, getting the same message of file permission, can you please change the theme and WordPress Post Tabs plugin permission to writable via FTP, you can refer this link for more details https://codex.www.ads-software.com/Changing_File_Permissions. Or you can send us the FTP details for the site, so that I can modify the files and try to fix the issue.
Waiting for your response.
Thank you for all your patience.Best Regards,
Sukhada,
TabberVilla Support Team.Hi Sukhada,
I’ll sent you FTP details by email.
Just in case, this WP installation is translated to Spanish so the Update File button it’s “Actualizar archivo”. I’ve made a screenshot of the button:
https://www.unitech.grupadigital.com/wp-content/themes/unitech/images/update-file.pngThank you for all your help.
Hi Lucianoas,
I have fixed the issue. Please check the site and let me know if it is as per your requirement.
Waiting for your response.
Thank you for all your patience.Best Regards,
Sukhada,
TabberVilla Support Team.Hi Sukhada,
It’s fixed! It’s working perfeclty now.
I want to thank you for the support, fast responses to all my issues and excellent disposition to help every time. I’ll donate to the plugin because it worth it.
Hi Lucianoas,
Thanks for using WordPress Post Tabs and writing to us. If WordPress Post Tabs has been helpful to you please post your rating at
https://www.ads-software.com/plugins/wordpress-post-tabs/There is a rating section on this page where you can provide your rating about the plugin. In case your rating is less than 5, kindly let us know. We would like to hear your inputs so that we serve you with best Tabs and support.
Best Regards,
Sukhada,
TabberVilla Support Team.
- The topic ‘Tabs appear below each other and loss styles’ is closed to new replies.