Ynef’s DIY

How to add unique meta description tags in WordPress without plugins

When I checked my website for errors in the Google Search Console earlier this morning, I noticed a warning about duplicate meta descriptions on my WordPress website. I had 205 pages with duplicate tags and at first I didn’t think much of it, but I decided to find out the significance in terms of better SEO just in case. I was shocked to realise that having duplicate meta description tags throughout your WordPress blog is a bad idea and Google doesn’t like it one bit!

Google: Don’t duplicate meta description tags

Google’s Matt Cutts has officially stated in his video that it’s better to have no meta description tag than to have numerous duplicate meta description tags on all of your pages and categories. This is especially frustrating because by default most WordPress templates have only the one description tag displayed throughout the entire website. Check out this video with Matt explaining everything:

Unique meta description without plugins

It’s clear that Google doesn’t endorse the use of duplicate description tags and there are numerous plugins available that try to work around it (YOAST for example) and while I don’t personally have anything against these plugins, one might still consider avoiding them in order to gain better website loading speeds because it’s common knowledge that having too many plugins active on your WordPress site can actually slow down the loading speeds and make the end user experience that much more annoying.

Just a few lines of code

In your header.php file remove the default <meta name=“description” content=“Your description”/> and instead use the following code:

<?php if ( is_home() ) { ?>
<meta name="description" content="Your main and most important description shown on homepage"/>
<?php } ?>
<?php if ( is_single() OR is_page() ) { ?>
<meta name="description" content="<?php { setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); } ?>"/>
<?php } ?>

The above code uses conditional statements to check whether the currently displayed page is either a homepage, a single post or a single page and then uses “Your main and most important description shown on homepage” on your homepage and the default post excerpt in the description of posts and pages respectively.

In my experience you don’t really need to display the description tag anywhere else so I removed it from elsewhere. And in case you’re worried, Google is fairly good at coming up with descriptions for the rest of your page so your search results should still look very nice.

Double check just in case

This code works on my template, but you should still double check so after editing the header.php and replacing it with the original try refreshing your page (ctrl + F5) and then view the page source, especially the meta description tag, and see if it’s working. First try it on the homepage (main index) and then click on any posts or pages you may have and view the source on those pages also. If you see the post excerpt inside the description tag it means everything is working as it’s supposed to.

Share!

Closable jquery full screen popup window and how to make it using CSS

Have you ever wondered how some websites display a closable div or a full screen overlay on top of their main content to say something really important to the viewer? I had to do something similar for my old portfolio that is no longer updated, to direct readers to my new and better looking portfolio instead. Here’s how I did it.

HTML popup window is dead

I just had to say this before I continue. Do not use HTML/Javascript pop up windows- most browsers block these by default and if you mange to bypass the popup blockers, you’re just going to annoy your readers so much they will leave and never come back. Seriously, don’t do it! Instead, use a more modern approach by making a jquery popup box.

Full screen overlay effect in CSS

Consider a simple container div. We need to make its height and width match our viewport/screen. We can do this by applying a 100% viewport width and height:

#box {
height:100vh;
width:100vw;
background:white;
}

Depending on what padding/margin rules you have set for your body element, you might see that the box is not fully covering the screen yet. Besides, we need to position it outside the normal flow anyway, because it needs to stay on top of everything:

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

Now it should cover the whole screen with no margin anywhere. But is it on top of your main content? Probably not. You need to add a high enough z-index to it so it will stay on top:

#box {
z-index:999;
}

But wait… now you just have a box covering the whole screen and your content cannot be accessed. We need to have the box initially hidden so we can make it visible using jquery later on:

#box {
display:none;
}

Right now when you load it up, nothing should show because we have hidden the box. It’s advised to only load the overlay div when the whole page has finished loading so we will put the call inside a document .ready function using jquery:

<script>
$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
    //Box loaded
  });
});
</script>

The box should now load only when the rest of your website has loaded first. So far so good, but there is no way for your user to close the box. To do this, we need another div (it can contain a cool icon if you wish). I’m using a simple X icon with a transparent background found on Google:

<div id="close">
    <img src="http://ynef.net/portfolio/src/close-button.png" alt="Close" height="64" width="64"/>
</div>

The close button would look stupid if it was loaded immediately so we need to hide it the same way we hid the box itself in CSS:

#close {
display:none;
}

While we’re at it, we should position it in a place where it makes sense too. I suggest putting it in the top right corner of your screen with 10px away from both the top and right side (the display:block will make the entire div clickable):

#close {
position:absolute;
top:10px;
right:10px;
display:block;
}

Finally don’t forget to add a higher z-index than what you had for the box. In our case a z-index of 1000 should do the trick:

#close {
z-index:1000;
}

Back to jquery! Since the close button is hidden at first, we need to make it visible after we have loaded the box. Let’s also add a .click function to the close button that will hide everything when clicked:

<script>
$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
        $( "#close" ).show();
        $( "#close" ).click(function() {
        $( "#box" ).hide();
        $( "#close" ).hide();
    });
  });
});
</script>

Now that we have covered everything that’s happening, I can let you copy and paste the whole code as one:

CSS for fullscreen div

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
display:none;
}

#close {
display:none;
position:absolute;
top:10px;
right:10px;
display:block;
z-index:1000;
}

And the jquery

$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
        $( "#close" ).show();
        $( "#close" ).click(function() {
        $( "#box" ).hide();
        $( "#close" ).hide();
    });
  });
});
Share!

How to customize Jetpack’s Infinite Scroll footer and style the “scroll to top” link

Jetpack comes with a great feature called Infinite Scroll that adds Facebook style scrolling of content to your website, meaning that more posts are loaded as the reader scrolls down the page.

The only thing that sucks about the Infinite Scroll is the footer style. By default you’ll get a semi-transparent white box under your website that says: “Proudly powered by WordPress” along with the theme name you are currently using.

Here’s how to remove the default footer and replace it with a subtle arrow icon that’s pointing upwards.

Warning! You will be editing the Jetpack system files directly which means that any updates to the plugin will overwrite the customization.

Open jetpack/css/jetpack.css

Find this class:

infinite-footer .container

 

And add this into it:

border:0;
background:0;

 

Remove these:

background:rgba(255,255,255,.8);
border-color:#ccc;
border-color:rgba(0,0,0,.1);
border-style:solid
border-width:1px 0 0;

 

The modified class should now look like this:

infinite-footer .container{
background:0;
border:0;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0 auto;
overflow:hidden;
padding:1px 20px;
width:780px;
}

 

Add two new classes after it (this is the place to style your arrow):

.link-up{
color:#fff;
float:right;
font-size:1.7em;
}

.link-up:a{
text-decoration:none;
}

That’s it for the CSS. Now lets edit some PHP!

 

Open jetpack/modules/infinite-scroll/infinity.php

Find this function:

private function default_footer()

 

Remove:

$credits = '<a href="http://wordpress.org/" rel="generator">Proudly powered by WordPress</a> ';
$credits .= sprintf( __( 'Theme: %1$s.', 'jetpack' ), function_exists( 'wp_get_theme' ) ? wp_get_theme()->Name : get_current_theme() );
$credits = apply_filters( 'infinite_scroll_credit', $credits );

 

A few lines down replace:

<div class="blog-info">

with this:

<div class="link-up">

 

Go down another line or two and replace:

<?php bloginfo( 'name' ); ?>

with:

<i class="fa fa-arrow-circle-o-up"></i>

Note! I am using Font Awesome for this arrow. For this to work on your website, you have to reference the Font Awesome library somewhere between your <head> and </head> tags. Simply copy the following and paste it inside your <head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 

Yet another line or two below find and remove this entire div along with its contents:

<div class="blog-credits">
  <?php echo $credits; ?>
</div>

 

The modified function should now look like this:

private function default_footer() {
 ?>
  <div id="infinite-footer">
   <div class="container">
    <div class="link-up">
     <a id="infinity-blog-title" href="<?php echo home_url( '/' ); ?>" rel="home">
      <i class="fa fa-arrow-circle-o-up"></i>
     </a>
    </div>
   </div>
  </div><!-- #infinite-footer -->
 <?php
}

 

And that’s it. The only two files you need to edit are jetpack.css and infinity.php and you will finally be able to replace that ugly white footer box with something a lot more nicer!

If you don’t use Font Awesome anywhere else on your website, you might want to consider not using it at all for this one arrow icon, because including libraries can lower your page loading speed.

You can use a .png image for example. Just replace the <i class=”fa fa-arrow-circle-o-up”></i> with an image!

Share!

Goodbye GreyRound, welcome Messages From Outer Space

GreyRound was the first WordPress theme that I built from scratch. It took me a while, but I was finally able to publish it on the official WordPress theme directory which meant a lot to me considering it was my first theme. At the time of writing this post, the theme has already been downloaded more than 3,000 times. I’m not sure if it’s good or not, because I haven’t compared it to other themes, but for me the number feels pretty big. A quick Google search also shows that people are indeed using GreyRound for their websites and it just feels great!

I’m the type who can’t sit still for very long so only about a month later I already felt the urge of building another theme for my site. I wanted it to have Facebook like loading of content (infinite scroll with JetPack) and I knew it had to have something to do with outer space… and when you combine infinite scroll with a space theme, the title just kind of makes sense ;)

Messages From Outer Space took a little over one week to build because I used the underscores skeleton theme as a base (it’s an epic base and I really recommend it!). This way I only had to change a few things in the theme structure and had more time to apply different styles to it. The layout and the main menu are built to make way for a bigger website with more content. As ynef.net is slowly growing bigger and getting more categories, the menu had to be designed differently from GreyRound’s circles.

I also made room for sponsor advertisements between posts (plsdon’t hate) and applied responsive styling so it will look fine on almost every mobile device. If you are on a mobile device and have JavaScript enabled you can use the websites logo to toggle the main menu.

As of right now Messages From Outer Space theme is not available to the public because I felt like my personal website has to be slightly different from the rest that’s out there, but I might change my mind about that in the future.

Share!

Witcher 3 The Wild Hunt crashes on cutscenes and crashing to desktop when swimming

Witcher 3 – The Wild Hunt

The long waited and delayed game has finally been launched to the public and while we were expecting to finally enjoy a smooth gameplay after all the waiting, instead, we got a game seemingly full of bugs and crashes! It seems that way too many players are experiencing all sorts of problems with the game as mentioned in this Reddit post.

Crash to Desktop

The most common issue appears to be the game crashing to desktop without any warning. For me personally the game kept crashing while I was watching one of the first cutscenes with the peasant and his killed horse. As soon as the monster attacked, the game crashed to desktop.

To fix this I simply skipped the cutscene altogether by pressing the space key.

Update of June 28, 2015 – If you have an ATI card, try optimizing game graphics settings through the updated Gaming Evolved Client. This seems to have fixed the crashing issues for me.

Crashing when surfacing from under water

I was disappointed by having to skip the cutscenes, but it was OK because I was able to watch them all on Youtube. The real problem started when the game kept crashing simply by trying to swim to the surface from under water. After a few Google searches I was able to fix my crashing issues for the time being, but I am still unsure whether or not the game will run smoothly in the future.

Solutions to Witcher 3 crashing

It seems that different computers and video cards need different settings so the best option would be to simply try everything by trial and error. It’s tedious work, but eventually you should be able to fix the game for your system. Here are a few pretty good things to try:

1. Change the display mode

Changing the display mode From Full screen to Borderless window seemed to do the trick for me.

2. Add GOG Galaxy to your firewall whitelist

Not sure if this actually helped, but it was suggested elsewhere so I tried it just in case.

3. Update your graphics drivers

I’m starting to think this was the most important step! Simply download the latest drivers for your video card. Nvidia has already updated their drivers for Witcher 3. Not sure about ATI, but it worked for me.

4. Delete the galaxy.dll file

Delete the galaxy.dll file from the game’s bin\x64\ folder. By default it should be located here: C:\GOG Games\The Witcher 3 Wild Hunt\bin\x64

5. Make sure the game uses your gaming card

It might seem obvious, but I forgot to change this at first. If you happen to have two graphics cards, make sure to change witcher3.exe to use the better card by default.

The above steps helped me solve my Witcher 3 crashing problems. If you are still having issues it might be worth looking at the official GOG thread here.

Share!

Fluid and responsive website layouts become vital for your survival on the internet with the latest Google search update

What is a fluid layout?

A fluid layout is a website layout where all the containers remain proportional relative to the screen width. In other words if you were to make the screen smaller, the fluid layout will adjust itself automatically to fit your screen without breaking the containers or moving them under each other etc.

A fluid layout is easily achieved most of the time by replacing all fixed widths with percentages.

Replace this:

.container {width: 1024px;}

With this:

.container {width: 100%;}

What is a responsive layout?

Fluid responsive layout pictureA responsive layout uses media queries and is a little bit more technical, but the result will be even better than simply having a fluid layout. A responsive layout can change the look of your website completely when viewed on smaller screens and this is its main advantage over a fluid layout because if your screen is very tiny and you are using relative container widths then those containers could become too small and your website becomes hard to navigate (especially on touch screens).

 

The example below will change the containers padding and font-size automatically when the screen size goes below 1024 px.

 

.container {
width: 100%;
margin: 0 auto;
padding: 5% 2% 5% 2%;
font-size: 2em;
}
@media all and (max-width: 1024px) {
.container {
padding: 2% 0 2% 0;
font-size: 1em;
}
}

Google’s “mobilegeddon” will change everything

It’s called the mobilegeddon for a reason. Google is going to update its search in a way that mobile friendly (fluid and responsive websites) will get a significant advantage over regular fixed websites. In other words, if you’re not mobile, you no longer exist on the internet. (Google IS the internet in case you didn’t know that by now!)

Google is not doing this to punish you. The statistics show that more and more people are switching over to mobile devices to find relevant information online so it’s really just a step towards a better user experience in the long run. Besides converting your old fixed website into a modern fluid layout is no rocket science, but can still be challenging enough so that a better solution in some extreme cases would be a complete design overhaul.

Whether you need a complete design overhaul or a simple conversion to a fluid/responsive layout, I can help you! Just message me on Facebook or Skype (frank.petser) and we’ll talk more about it.

Share!

GreyRound theme is now available to download for free from WordPress

It’s finally accepted

I initially submitted the GreyRound theme for WordPress to review more than 4 months ago, but because this was my first ever attempt at creating a new WordPress theme completely from scratch, there were quite a few things I missed and I was asked to change those.

 

After hours of reading the WordPress Codex I was ready and submitted the 2’nd version for WordPress to review. Weeks passed… three weeks to be exact. I was very disappointed to see that there had been no activity around my theme any more. It later turned out that the guy who was supposed to review it for me had abandoned the thread- I guess he had other things to do…

 

So my theme got assigned to a new moderator called Poena after about two months. This is where things finally started moving somewhere. Many thanks to Poena for being a very supportive reviewer! She helped me through all the things I forgot to implement and when I didn’t know how to do something she first made sure I learned about it on my own and then proceeded to add her own ideas. I think it’s great that the reviewers at WordPress actually care about you getting better in your skills and help you learn like that. So after a total of nine revisions the GreyRound theme was accepted.

 

Download GreyRound 0.0.9

To download my first WordPress theme, GreyRound, simply visit the link below and don’t forget to rate!

https://wordpress.org/themes/greyround/

Share!