Recent Posts

A Disturbing Trend For Premium Themes

By: Adam on in General, Themes - No Comments

Awhile back I purchased a theme from Theme Forest called the Flag Theme. The day I purchased the theme everything seemed fine, being a developer myself I was not super pleased with some aspects of the code however it was not a deal breaker.

After a few days of using this theme I noticed that I’ve been getting a lot of new user registrations, at first not thinking anything of it I thought hey maybe I’m onto some sort of popular niche and people are liking what I have to say. But then after about a week and a half I decided to have a look at some of the user registrations.

I found that every single one of them were extremely spammy so I thought great someone decided to send a bunch of automated spam bots to fill up my user database. At this point I never did suspect the theme was at fault.

Then a few months went by and I purchase another premium theme from Theme Forest called the Good News theme and the same exact trend started. I was getting hit with a bunch of completely spam filled users, literally one day after the site launched I was getting user registration spam. Only this time I was getting this type of spam when I knew for a fact, I was 100% certain no real human was actually visiting my website at that time.

This is when I started to suspect that the premium themes I had purchased were to blame. I began to think if this has ever happened to any of the themes I’ve personally built and the answer was a big fat NO. The Codehooks theme, being somewhat new at the time wasn’t even being hit by spam users. Come to think of it the only time I’ve ever been hit by spam user registrations was when I purchased a premium theme.

The only logical reason I could think of was that these theme developers attempt this type of trickery in order to make unsuspecting people think there sites are more popular than they really are. I mean think of it you buy a new theme and all of a sudden your getting new user registrations and you think people are reading what you have to say all because of the new theme.

Well I’m here to say if you employ those types of dirty tactics in your premium themes then I’m outing all of you and never buying a thing from you ever again. I wasted over a hundred bucks buying themes that are essentially designed to spam you.

I should mention that I’m not against premium themes, I’m actually building one myself that I plan on selling in order to make a few extra bucks, what I am against is people who attempt to employ spam techniques or use malicious types of code in there premium themes. I hate that with a passion because it gives all the good developers a bad name as well.

Anyway I’m curious to know if you’ve ran into this type of trend yourself? If so what free or premium theme were you using at the time and did you continue to use the theme or did you move on and decide to find a different theme? Let me know in the comments below.

Understanding How CSS Line-Height Get’s Calculated

By: Adam on in General, Programming, Tutorials - No Comments

Today I wanted to take a quick minute to show you guys something that may very well already be pretty obvious. But hopefully you’ll learn at least one thing. What I’m talking about today is understanding how the browsers calculate the CSS Line-Height property.

Let’s jump right into an example and I’ll show you why it’s so important to understand it. First thing is to know that the line-height property can have four different values, the first being the default value if no value is supplied, the second is just a simple number with no units, the third can be a length and the fourth can be a percentage.

Default Calculation

Line-height is calculated based upon the font-size of a particular element, for instance in a typical body style you might notice a line that looks like this.

font: normal 16px Arial, sans-serif;

This line specifies a default font-size of 16px, so any other element that contains text with no line-height. The line-height will default to 16px (So far very easy to understand).

A Unit-less Number

The line-height property can also have a unit-less number which may look something like this in a style-sheet.

line-height: 4;

So what actual height would that value boil down to? Well if your using the unit pixels in your body declaration (which in this example we are) than the browsers will calculate the value of 4 into a pixel based unit but the answer is not 4px.

How the browser does this is multiples the unit-less line-height number by the default font-size specified in the body tag. So this 4 would get multiplied by 16px and we would wind up with a total line-height of 64px (16px x 4).

Lets take things a step farther and lets say that in our fictional style we also specify a font-size along with our line-height but this time we specify the font-size in em units and not px. Our style might look something like this.

line-height: 4;
font-size: 2em;

Now our body tag specifies the default font-size to be 16px but in our new style our font-size is 2em. Now 2em basically says take the default font size of 16px and double it so that it now becomes 32px. If our font-size was 3em the conversion would be 16px (default font-size set in body tag) trippled resulting in an overall font-size of 48px.

So how does this effect our line-height conversion. Well if our font-size is 2em that also means 32px, our line-height value in pixels will now be 32px (2em) x 4 (line-height) = 128px. That is how line-height gets calculated down into a pixel value by the browser.

Another quick helpful tip is that you can also calculate the unit-less value of line-height if your only given it in pixels. For instance when we set our font-size to 2em what if we were trying to find the unit-less value for the line-height instead of the pixel value we were provided.

Another words if our line-height was 128px what is the unit-less number that equals 128px. In this case we would simply divide 128px (line-height) by 32px (2em or double our default font-size set in the body tag) = 4.

Finally if our line-height was some random number like 67px and we didn’t have the font-size 2em style. Our calculation would be 67px / 16px = 4.1875. The 67px set in our line-height and the 16px set as our default font-size.

Conclusion

I hope I didn’t confuse you too much with those examples of how line-height is calculated but just in case I did, you can jump over to the Mozilla Development Network that gives you a cleaner write up that may make things become a little bit more clear.

The reason why this is so important is because it makes vertically centering text based content a billion times easier than trying to work with absolute positioning or vertical-align attributes. By generating a height value with line-height the text becomes vertically centered without any additional hassles.

How To Perfectly Center A Variable Width Element Using Pure CSS

By: Adam on in General, Tutorials - No Comments

I’m sure at some point or another we’ve all ran into an issue where we were able to perfectly center an element only to have it completely fall apart when the width of the element changed on us. Well those days are over and this is a little CSS alignment tip will hopefully save you some heart-ache in the future.

First off an example, that was taken from a prospective header I’m currently working on for the new Codehooks website. In the first image below you can see everything is aligned perfectly.

Codehooks Header

The css code that was used to get this type of look is displayed below.

.site-title {
    position: absolute;
    left: calc( 50% - 115.5px );
}

As you can see I’m using an absolute position because the header in question is fixed (it will come with us as we scroll down the page). Then as you would expect I’m moving it to the left 50% and then I’m moving it back 115.5px that is half the width of the text (I used Photoshop to measure the full width).

This solution works perfectly fine if you never ever have to change your title, however if you do change it down the road, look what happens to your perfect alignment.

Codehooks Broken Header

Everything is tossed out of wack and it’s back to the drawing board. Well to fix this what we do is to first make sure our text or image has a parent (any parent will work) such as an H1 tag, if your using WordPress chances are your HTML will look something like this.

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

That is a pretty standard item to find in your header.php file. The proper CSS to use with this HTML is the following.

.site-title {
  position: absolute;
  left: 50%;
}

.site-title a {
  position: relative;
  right: 50%;
}

As you can see what I’ve done is changed the first CSS style to have a left justification of 50%, however to align it perfectly I have to move it in the reverse direction (half of the items width). I achieve this by jumping into the child node and setting its right justification to 50%. The result is the following.

Perfectly Aligned Title

This works perfectly, now the title can be changed to anything we want and it will always be centered. This works because of the way HTML handles the parent/child width. The parent width will default to the width of it’s children. Meaning if you use a right justification of 50% on the child that’s the exact same thing as saying move me to the right by half of my width.

If your completely lost head over to CodePen where I’ve added a live example of how all this works together. Change the HTML where it says “Short Title” to something longer and you’ll notice the text is always perfectly aligned. Now remove the CSS attribute right: 50%; and try again and you’ll notice it’s no longer perfectly centered.

If you have any questions about this example please let me know in the comments below and I’ll do my best to help explain how this works in greater detail I’ve actually left something out about how text is aligned on the page but most people will already know what that is.

Again don’t be shy if you need more information I’m here to help.

Creating a Popout/Slideout Style Search Box Using Pure CSS & HTML

By: Adam on in General, Tutorials - No Comments

While creating the new theme for Codehooks I’ve decided to use a Popout/Slideout style search box for the design. This search box is great from a responsive design stand point and also holds up quite well from a usability or UX standpoint. To really show you what I’m talking about check out the little demo I’ve created on Codepen.

Click Here For The Demo On Codepen

Disclaimer: The demo on Codepen has only been tested on Chrome V.43 and IE 11 and may not work as intended in other browsers.

I’ve taken the time to comment the CSS as best as possible so I’m not going to talk about it in detail, additionally the HTML portion (shown below) is what you’ll see when using the WordPress function get_search_form(). The only difference is that I’ve removed the label, submit button and changed the placeholder text for this demo, oh and removed that default DIV tag as well.

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<input type="text" class="field" name="s" id="s" placeholder="Type a word or phrase and press enter" />
</form>

As stated above I’ve documented the CSS quite well so I’m not going to discuss it in this blog post. However if you are having trouble understanding something with the code or are wondering how to migrate it into your theme, feel free to ask me a questing in the comments and I’ll do my best to help you out.

/* This Styles the FORM tag, nothing special just some WIDTH, HEIGHT, PADDING, & a BORDER to make the search icon look pretty */
#searchform {
  height: 32px;
  padding: 20px;
  width: 32px;
  border: 1px solid #e2e2e2;
  cursor: pointer;
}

/*
This displays a search icon but it doesn't work on CodePen (It defaults to a small black square shape. To learn more about using Genericons visit http://genericons.com/
*/
#searchform:before {
  content: '\f400';
  font: normal 32px/1 'Genericons';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* These next two tags are used to generate the effect seen in this demo */
#searchform input {
  /* On page load hide the input box and change its width to zero */
  visibility: hidden;
  width: 0px;

  /* Align the input box so that it matches up with the search icon */
  position: absolute;
  top: 8px;
  left: 81px;
  height: 72px;

  /* give the input box the same height as the search icon */
  /* Clean up the input box making it look visually cleaner (not required for the effect) */
  font-size: 18px;
  padding: 0 10px;
  border: 1px solid #e2e2e2;
  color: #5c5c5c;
}

/* This is where all the real magic happens */
#searchform:hover input {

  /* When we hover over the search icon make the input box visible and set it's final width value */
  visibility: visible;
  width: 500px;

  /* This controls the animation, it transitions the width from 0px (set previously) to 500px (set in this style) over a period of 1 full second */
  transition: width 1.0s;
}

/* Disable the browser outline when the input field is active (just used to make it look visually cleaner) */
#searchform input:focus {
  outline: none;
}

Tip: This code and the comments in it are a billion times easier to read on CodePen. Also I’ll say it again if you have any questions please feel free to ask me in the comments below and I hope you enjoyed this little demo.

Preparing For WordPress 4.3

By: Adam on in General - No Comments

Well Today I took a bit of time to test the Social Graph Protocol plugin against WordPress 4.3 and everything seemed to be stable enough so I updated the plugin to reflect which version of WordPress it’s compatible with. However if anyone notices or has any issues with it once 4.3 officially drops let me know and I’ll look into it.

I’ve been trying to re-design Codehooks for quite some time now and it’s only been this past week where I’ve actually started making some progress but then I got into WordPress 4.3 and well that whole thing set me back a little bit, not much just took my attention off my development efforts is all.

In my opinion nothing really special about 4.3 for the average person, a few cool little Plugin things there changing up as well as some visual code editor changes are coming our way. One thing topped my interested was there getting ready for PHP 7 they said in one of the posts and I thought hold on I’m using PHP 5 and were getting ready for PHP 7. What the fuck happened to PHP 6 did I just arrogantly ignore an entire iteration of my programming language?.

Anyway hoping to get some time to change up Codehooks and get back to writing more meaningful content instead of these stupid little updates every now and again. If there is anything you’d like me to talk about or help you with in the meantime just let me know in the comments below.

Facebook’s Advertising Review Teams Are CRAZY

By: Adam on in General - No Comments

Sunday nights and Thursday afternoons is when the Facebook advertising review team goes from a normal group to being straight up crazy, take a look at the image of the beautiful Hilary Duff below.

Hilary Duff Sexy

Now as it turns out on Sunday nights and Thursday afternoon’s this image is considered to show too much skin and is suggestively naughty enough to be denied access in a Facebook advertisement while any other day of the week it’s perfectly acceptable.

This goes for your Ad copy as well, go ahead give it a try use the words “Dating” in your title/copy even if you don’t have any promotional material on the other end that would suggest that your promoting anything dating related you may still wind up being denied.

I’m just here to rant about wasting my time on some campaigns I’ve been running recently but I will share a helpful tip for you, if your advertisement gets denied and it’s not blatantly breaking the ad-policy guidelines. Just wait 30 minutes, change up one minor targeting option and re-submit your ad.

Do this three or four times if you have too because you’ll eventually get someone level-headed and they’ll approve your advert like nothing was ever wrong with it in the first place. The reason is because apparently some people working on the ad approval team seem to take the guidelines WAY too seriously while others realize there only guidelines not set in stone rules to follow.

Social Graph Protocol Plugin Version 2.0.6

By: Adam on in General, Plugins - No Comments

In the coming hours you should start to see updates inside of your WordPress installations for the Social Graph Protocol plugin. I was just playing around with it and realized that for some odd reason a few months back when I pushed the 2.0.5 update something wen’t VERY VERY wrong and the files were corrupted and half of them were deleted so it caused some issues for sure.

Anyway I decided to get off my ass and rectify that situation and after getting into a fist fight with SVN I came out victorious and managed to update the plugin to version 2.0.6, unfortunately it does not contain any new features at this point, just a fix to the 2.0.5 upload disaster.

Quick Plugin and Site Updates

By: Adam on in General - 2 Comments

After not posting on CodeHooks for about a year I decided not to let the domain and the social graph protocol plugin die, instead I intend to resurrect both of them and as of today I pushed an update for the social graph protocol plugin and wanted to say that I do intend on updating all of the code, it will be getting one massive overhaul in the coming months but for the immediate future the update I pushed was simply to avoid having the plugin deleted from the WordPress repository so no changes were actually made (Yet).

On another note I’m spending today and probably the next few weeks re-designing the CodeHooks website from the ground up I originally intended the site to be a place where I can help other WordPress users with there troubles, share my code with the world and to get my name out into the world. That is still the true intention of CodeHooks, however this time around there will be a twist, I’m attempting to turn my programming and web development skills into a full time career, be my own boss type of stuff.

With that said you will see advertisements on the site in the future, sometime after the re-design it won’t be anytime soon and when I do it I promise any ad you ever see on this site will be extremely high quality I won’t allow people to advertise on my site if I haven’t tested there products and made damn sure it’s worth every penny. Along with ad’s I’m going to continue creating free but also paid WordPress plugins, I have a great idea for a paid one coming in the future but I won’t get too much into that as well.

As for publishing content on the site my intention is to create at least one post per week starting sometime in the new year. That is all for now, just a quick little update as to where things are headed with CodeHooks. I’m making some BIG changes and going to be giving my readers/fans some good products and services in the coming year so keep an eye out in the future.

New Twitter Account

By: Adam on in General - No Comments

Hey everyone sorry for the extremely lack of posts recently I’ve been quite busy with other projects but I’ll do my best to try and create some more content and redesign CodeHooks I really do love helping out the WordPress community with any problems they might be having and I do love making free plugins and themes for the world to use but unfortunately sometimes I have to focus on making money over doing stuff for free in order to survive.

But I had another idea since I can’t really dedicate a ton of time generating content that I think might be useful to the WordPress community right now so what I’ve done is created a personal Twitter account for myself, this is an account in which is listed under my personal name in an attempt to not only break away from the anonymity but also a way for me to more easily connect with everyone.

You can follow me @codehooks and if you have any problems or questions with WordPress or just want to brain storm a new project that your not sure about by all means shoot me a message on Twitter, since I now have the new Samsung Galaxy Note 3 phone it makes it super easy for me to contribute to the community via Twitter. Basically I’m going to try and re-direct the focus to help people on a more personal level than on a broad level.

By that I mean if your suffering with a WordPress or Web Development problem in general you can ask me for some help via Twitter and I can use my experience to help you out, consult and solve some of the issues you might be facing, now and/or into the future (For Free of course), I think it’ll save me a ton of time by asking the community to come to me directly instead of me trying to come to the community.

I know it seems kind of selfish to say it like that but it’s really not, if you have a problem I can most likely solve it I’ve been developing with WordPress for as long as its been around and I’ve been developing and working on-line for more than 10 years so you get free help with your projects and I get to continue helping the WordPress community and spreading my name as a developer, I think its a win win :)

Anyway my new Twitter account is @AdamLosier in case you missed it above, feel free to follow me and ask some questions if you have them, I’ll also be posting ideas, tip, tricks, over time relating to WordPress, Web Development in general and turning a profit on-line so you might also find that information to be a little bit helpful.

Easily Make Posts Children of Pages [Plugin]

By: Adam on in General, Plugins, Programming - No Comments

So I was starting a new website again, like I do pretty much every month (I know it’s hell) and this time I wanted to simply make certain posts children of pages, you see I was working on a type of image website that was related to celebrities so I wanted to have a page dedicated to a certain celebrity like “Christina Hendricks” and have things like a bio, movies she’s been in something like IMDB almost with a twist, then I was going to have posts showcasing various images of the celebrity. So naturally I wanted to make those posts children of the pages so I could access those resources from the page template I was using for the celebrity.

I was not working on anything special, just a super basic project I had on the go and I realised (surprisingly) that oh hey you can’t make posts children of pages, so naturally I jumped into the repository, installed a few plugs and realised none of them were for me, I just wanted something extremely basic so I took twenty minutes and created one that I figured I’d share with you here.

Read more…