Requirements to create a theme for wordpress

WordPress is the number one Content Management System (CMS) for both small time blogs, huge corporate websites and even online shops thanks to an endless sea of plugins such as WooCommerce, for example. With thousands upon thousands of free wp themes available on the internet, it’s almost guaranteed that you will find the one template that suits You perfectly. However if you are after a more professional and a truly one of a kind appearance, developing your own WordPress theme is probably a better idea.

Requirements for building a WordPress template

Creating your own WP theme requires at least a basic understanding of the following web programming languages: PHP, CSS, HTML and JavaScript. Here’s a quick overview on each language and how well you should “speak” it:

  • Cascading Style Sheets or CSS for short is the first one on my list because it’s the most important part of any theme/template. This is what gives your website (the skeleton) an actual “skin”. Without it there would be no “web design”.
  • Hypertext Markup Language or HTML for short is next in line because it’s “the skeleton” of your project. Without it there would be nowhere for your “skin” to go.
  • Hypertext Preprocessor (PHP) is yet another very important part of a WordPress theme because PHP is a server side scripting language which makes your entire website “tick”. You can think of PHP as a set of cogs, strings and wires that when put together just right, will make the clock run.

WordPress How To Create A ThemeThe three programming languages above are all required if you want to develop your own wp theme, but CSS and HTML are the two most important ones.

PHP is important too, but since WordPress is a very advanced platform, you will find that there is little to no need to actually add/edit any PHP code when creating a new theme. It’s possible to get away with just knowing how to use PHP’s include function in order to include certain page elements together (for example header, content and footer).

However if you want to build custom plugins or other functions that no other website uses, you have to dig a little deeper into PHP.

You may have noticed that I left JavaScript out of the list and I did it on purpose because honestly JavaScript and libraries such as jQuery are mostly used for cool special effects and aren’t really a requirement for building a new and functional WordPress template.

Additionally it may slow down your website’s loading speed and nowadays we can achieve pretty much any special effect using CSS/CSS3 so for the average user JavaScript is just going to do more harm than good. On top of that there are still plenty of oldschool internet users who have disabled JavaScript on their browsers.

Recommended framework to work with

I seriously advise against building a WordPress theme from scratch unless you’re doing it because you want to learn everything there is to know about the wonderful CMS. Why? Because WordPress is quite complex and it would take you a very long time, especially if you have never done this before, to go through all of the code and create a template on top of it.

It’s simply a lot easier and faster to use a “naked” framework which includes all the basic back-end stuff so you can get developing the front-end immediately. One of my favorite “skeleton” frameworks is Underscores and I have designed many WordPress themes on it. It’s basically a fully functioning wp theme with absolutely no design so it looks like you’re back in the 90’s.

Additional tools

You will need Notepad or better yet, Notepad++ to write code which I assume most of you already have and a testing platform with PHP 5 support, an SQL database and optionally FTP access if you’re not doing it locally.

Google Chrome is great for developers as it comes with the Inspect element feature which means you can inspect any element on your web page and the browser will show you exactly where it’s located within your code. It’s especially useful for figuring out where the element is rendering, what id and class it has and a lot more.

WordPress Codex is a useful repository of code (mostly back-end) with great examples and a very active support group ready to answer your questions. Only StackOverflow can outshine it’s activeness!

Finally the Theme Unit Test data will populate your WP blog with dummy content with the sole purpose of breaking your theme, which is good of course, because otherwise we would miss the small stuff and our project wouldn’t be whole.

Share!
Filed under: Web developmentTagged with: ,

I just made a new Blogger template for Pictures.ee

Pictures.ee is a brand new website or should I say, photoblog, where you’ll find various nature related photography made by two amateur photographers in Estonia.

Pictures.ee Blogger Template Screenshot

Due to a limited budget we decided to use Blogger as our Content Management System mainly because of the free hosting it provides. It’s true that Blogger has a lot of limitations compared to other more sophisticated CMS out there, like WordPress, but for now it serves its purpose just fine.

I really wanted to keep the design simple so I removed most of the usual clutter that comes along with every basic template. At first glance, you might not even recognize that the site is running on Blogger. The original comments section has also been removed and replaced with a sleek Disqus plugin where anyone can comment by logging in via Facebook or Twitter etc.

The thumbnail galleries are grid-like or at least that’s what I was going for. There is no custom mobile theme for Pictures.ee so we are currently using the default mobile template that comes with every installation, but as the website grows I might reconsider and create a mobile theme with a bit more personality.

Big thanks to Background Labs for providing me with a neat wooden background image. It really makes the template whole!

Share!

HD Asphalt Pavement Background Image for your next web project

I took this with my Samsung Galaxy S2 which has a pretty decent 8MP camera for a smartphone. Added some finishing touches using a freeware photo editor software called PhotoFiltre and the result is a wonderful, slightly dark asphalt background image. You can use it wherever and however you see fit! I would appreciate if you linked back to my site though, but it’s not required.

Click on the image to enlarge

Grayscale HD Asphalt Background Image

Share!
Filed under: Web designTagged with: , , ,

WordPress Portfolio Theme

By breaking up the skeleton of underscores I was able to craft this portfolio theme for WordPress

Screenshot of ynefs portfolio

Main features

Navigation menu is generated from categories and displays a category view

Cool sliding effect on the menu using a combination of transition and padding

As you scroll down the site title and description disappear along with the navigation menu

They reappear when you start scrolling up

Custom header gets added to Artwork and Music categories by manipulating directly CSS style with jQuery

Footer has three distinct columns

Picture links in gallery and footer icons have a tint overlay effect on hover

 

Share!

Realistically, how much should a website cost?

Every web development agency is known for either being secretive about their web design prices, or throwing around huge and unrealistic numbers, when in reality the most common modern website design cost can easily fit within the $200-$400 range.

How much does it cost to build a website

How much does it cost to build a websiteNot much! For clarity, let’s only talk about building a simple business-card type website with no custom built CMS (Content Management System) in this article. These types of websites are ideal for small businesses who operate mainly offline. For example restaurants who publish their best meals and prices on their website or a fun canoeing service for your friends and family.

No matter what a web page designer is telling you, in reality such a website can be built within just one or maximum two days. In fact, it will take a professional web designer an hour or two at most! Makes you wonder what the hell are they charging you for, right?

Sometimes web designers try to justify their high fees by using the word responsive over and over again. A responsive web design means that your website will be perfectly viewable in all devices (desktop computers, laptops and mobile phones). A responsive design seemingly adjusts itself to fit every screen size perfectly. It might seem like magic or some type of Artificial Intelligence to anyone who has no idea how web design works, but in reality this too is nothing complicated!

Responsive web design is not rocket science

Responsive web designWhenever I start building a new theme or design, I make it responsive as I build it. I do it by checking my theme with the Firefox plugin called L-Square to identify screen sizes where the design starts to break. I then note the screen size and create a separate CSS style for this particular screen size. Not that hard! If anything, it’s a little more time consuming, but the end result will be a lot better than using a generic responsive template because every theme or design is unique and it’s best to treat them all differently.

I get why web designers might charge a little extra for a responsive design, but mostly they are just trying to make it look like something super hard that will take long hours with a lot of coffee, sweat and tears… and that’s just silly.

Spend most on marketing, not web design!

It should be obvious enough, but people are still getting it wrong. The toughest part of any website development is the actual marketing itself and not coding. Depending on your niche, it can take weeks, if not months to make your website properly visible on the internet. Anyone who claims they can make it happen within a day is either lying to you or using questionable methods that will do more harm than good in the long run.

It’s an ongoing process and shouldn’t be advertised as “set and forget” by the web designers. Proper marketing is something you do consistently, a little bit every day.

Learn internet marketing yourselfAnd it’s best to learn it yourself

Don’t get me wrong, I could be your professional marketing agent, but it’s going to be a pain in the ass! If your website is about car parts or something else extremely boring (for me) it will be hard for me to promote this stuff because I would have to write articles about something I know nothing about and post on relevant communities and forums on topics I barely understand.

So depending on your niche, it’s sometimes advised to do the marketing yourself because you are the only person with the right mindset, attitude and passion. It will make your entire online image more personal and REAL if You are behind it and not some guy who doesn’t even understand your business.

How to learn marketing quickly you ask?

A good place to start is Warrior Forum where people with different businesses all come together and share the latest ideas, tricks and trends in internet marketing!

You can also contact me and we’ll see if I can help you with your website and business as a whole. It’s always a good idea to get some outside feedback.

I’m not going to give you my contact details directly. Be creative and find a way to contact me yourself!

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!

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!