wordpress: expose username fix and hide author page

by prettyscripts on 2015-07-25 15:16 • Send feedback »


it's inevitable that hackers want to break into your site. with some of the wordpress sites i managed, i'm surprised to find that no matter what username i changed to, even if the name is very cryptic, there are hacking attempts with those usernames! i looked everywhere to ensure username is not exposed yet they could still find it!

are hackers really that smart?

apparently this is a known issue. i found an old discussion from 3 years ago.

wordpress has a built-in feature that displays author's profile.

yoursite.com/?author=1 will redirect to yoursite.com/author/username.

solution 1

hide it with .htaccess:

RewriteRule ^author/(.*)$ /index.php [R,L]

solution 2

install disable author pages plugin. setup and configuration is very easy. highly recommended a must-install plugin, unless you want to display author's page.

css: responsive video

by prettyscripts on 2014-07-23 13:24 • Send feedback »


the css framework i worked on is able to handle all types of responsiveness but not video. so i did a bit of research and found a piece of code that does the trick.

wrap the embedded video in a container as follows:


<div class="video-container">
  <iframe width="640" height="480" src="//link-to-video" frameborder="0" allowfullscreen></iframe>

add the following css:


.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
.video-container iframe,  
.video-container object,  
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

making foundation 5 top bar working with wordpress menu

by prettyscripts on 2014-06-18 19:22 • Send feedback »


wp_nav_menu() is a wordpress function to display menu defined with register_nav_menus() in functions.php.

when using foundation framework in a wordpress theme, the standard way to use wp_nav_menu() works if you have a single-level menu. ie no drop-downs. it's when it's a multi-level menu with sub-menu in the drop-down that it won't look nor work properly because foundation has define a set of classes to make it work and those classes aren't standard in wordpress.

to make it work, you need to call a walker class. luckily someone has done the hardwork and the code can be easily incorporated to a wordpress theme.


note that at the time of writing, this has been tested on wordpress V3.9.1 and foundation V5.2.3.

create a file with the menu walker class. include this file in functions.php.

in your navigation section:


<nav class="top-bar" role="navigation" data-topbar>
    <ul class="title-area">
        <li class="name">site title</li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    <section class="top-bar-section">
    <?php wp_nav_menu(array(
            'theme_location'    => 'the-menu-defined-in-functions',
            'walker'            => new Top_Bar_Walker,
    )) ?>

sub-menu on mobile device

foundation reveal and slick carousel

by prettyscripts on 2014-06-13 01:18 • Send feedback »


i was working on a website using foundation framework. it requires a slideshow on a modal window, which i made use of components that comes with foundation - reveal and orbit slider.

i've used orbit on a few projects. however problem is encountered when working on this particular project, which i believe is due to its use in conjunction with reveal. the slideshow works perfectly upon loading. but for some unknown reason it stopped working after a while - no response and images won't slide. you need to reload the page again to make it working again.

upon checking for solution, i came across announcement that orbit has been deprecated. of course i couldn't find any solutions and i had to look for alternatives since there will be no further development on this component.

based on the suggestion from the post, i tried bxslider and slick. both worked perfectly until the slideshow is added to reveal. image height is zero!

the problem

slider hieght is zero in reveal.

the solution

thankfully i found a solution, originally an orbit slider problem and can be applied to slick.


    $('.reveal-modal').on('opened', function() {
    $(document).ready(function() {

note lines 3-5: this is the magic code that makes it works!

please note that this works with slick but not with bxslider. if you know the solution to make it work with bxslider, please leave it in comments.

if you have used other jquery based carousel or slider that works with reveal, please let me know in comments too!

prevent directory access

by prettyscripts on 2014-06-11 09:01 • Send feedback »


there are a few ways to prevent access to subdirectories of your website.

blank index

create an empty file with name index.html or index.php in that directory. visitors trying to access that directory will see a browser with nothing.

with .htaccess

create .htaccess in that subdirectory with just one line:


deny from all