How To Install A Local Web Server

Reading Time: 2 minutes

xampp-welcome

Ever wanted to set up a local copy / version of WordPress, Magento, Joomla, Drupal or any other PHP / MySQL Content Management Framework on you own PC?

In this guide, I will show you how to install a local web server on your own machine.

Any decent web server requires at least 3 minimum components, Apache (the web server), MySQL (for databases) and/or PHP (for interpreting PHP scripts).

You can manually install all these components on Windows, Mac or Linux (respectively known as a WAMP, MAMP or LAMP stack), which requires a bit of manual tweaking or you can just simply download and install XAMPP.

XAMPP

What is XAMPP?

Straight from the website:

XAMPP is an easy to install Apache distribution containing MariaDB, PHP, and Perl. Just download and start the installer. It’s that easy.

XAMPP Includes:

  • Apache
  • MariaDB (a MySQL replacement)
  • PHP
  • phpMyAdmin
  • XAMPP Control Panel (screenshot above)
  • OpenSSL
  • Webalizer
  • Mercury Mail Transport System
  • FileZilla FTP Server
  • Tomcat
  • Strawberry Perl Portable

Requirements

  • Windows: Windows 2008, 2012, Vista, 7, 8 (XP or 2003 not supported)
  • Linux: Most all distributions of Linux are supported, including Debian, RedHat, CentOS, Ubuntu, Fedora, Gentoo, Arch, SUSE.
  • Mac: Mac OS X 10.6 or later.

Once you had downloaded and installed the package, your webserver will be ready to rock and roll on your local machine.

How To Access Your Local Web Server?

Open up your web browser and type in the following address in the address bar:

http://localhost

Your localhost address is what your web server is interpreting and spitting back at you as the user. It looks to your webserver’s local files and database.

Where Are My WebsERVER’s Local Files Stored?

This primarily depends on where you installed XAMPP on your machine, but usually it can be found here:

C:\xampp\htdocs

For starters, place your new website’s files in a new folder and update the address, ie.

Your HTML and PHP files go under (file system): C:\xampp\htdocs\mytestwebsite

Your localhost URL (browser): http://localhost/mytestwebsite

That’s it! Now get playing with those PHP scripts and MySQL databases!

Add Custom CSS To a WordPress Theme

Reading Time: 2 minutes

Using themes in WordPress is fantastic for getting your website up quickly, but what if you want to add custom CSS to a WordPress theme and override the styling?

One way to change the default behaviors of WordPress is using a file named functions.php. It goes in your Theme’s folder. – WordPress.org Codex

There is the quick and dirty way to do it, but you risk having your code overridden when the theme eventually updates. This is not wise. Below I will show you the right way to do it via referencing a custom css file in your theme’s function file using the wp_enqueue_scripts hook.

Step 1: Reference the custom.css

Most WordPress themes, if not every theme has a functions.php file nested in it’s root folder. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/functions.php)

Open the functions.php file, head to the very bottom of the file and paste the following code below:

function custom_css() { // The custom name of your function
wp_enqueue_style( '', get_template_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_css' ); // Activating the function

Save it and proceed to Step 2.

Step 2: the custom.css file

Now that you have your theme looking for a custom.css file, it’s time to actually add one / create a file.

Create a custom.css file with your custom CSS code in it and upload it to your theme’s root folder. You will obviously want to throw in any custom or overriding code into there.

Save it and place it in the root of your current theme. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/custom.css)

Voila! You’ve done it. Now you don’t need to worry about your theme overriding your custom CSS code when you do a theme update.

You can check that your theme is calling the custom.css file by checking the source code of your website (CTRL + U in Google Chrome) and searching for custom.css. You should see the file referenced at least once.

My Top 10 Recommended Brackets Extensions for 2016

Reading Time: 4 minutes

brackets ide

Brackets_Icon.svgBrackets from Adobe is one of the fastest growing used text editors for web developers. Released just over a year ago, it’s become a great free IDE to code with and I’m finding it preferable to use over Sublime and Atom.

“A modern, open source text editor that understands web design.”

Because it’s relatively new on the scene, some new users may not be aware of it’s fantastic free extensions that can be installed via the Extension Manager within the application itself.

Below is a list of my top 10 recommended extensions (in no particular order) to use for Brackets – all of which are available to install within the Extension Manager.

1. Beautify

Beautify is a useful extension that formats your HTML, CSS and JS code into a neat and clean layout. Sometimes you get so carried away coding, it’s not always easy to keep it neat and tidy. Beautify takes care of all of that and is certainly useful if you’re a neat code freak who loves ordered code like me.

Beautify

2. Brackets Icons

The default file icons in Brackets leaves a lot to be desired. They are dreary and dull.  Thankfully this nifty extension swaps out the default icons for more vibrant, easier to spot icons.  Each file extension has a different icon making your website’s folder structure much easier to digest.

Brackets Icons

3. Color Highlighter

This handy extension highlights your CSS code with the actual colour that is written adding more zest to your CSS code. Yet again, this another feature that should be stock standard in Brackets.

Color Highlighter for Brackets

4. Documents Toolbar

Documents Toolbar adds a handy tabbed toolbar with support for various tab colours. It also gives a comprehensive context menu for those tabs so that you can quickly perform a common task quickly such as saving your work.

Documents Toolbar

5. Emmet

Emmet is a well known and popular must-have extension that easily automates syntax, provides dynamic snippets and greatly improves coding speed. It has saved my butt many times in the past.

Something like this:

#page>div.logo+ul#navigation>li*5>a{Item $}

Is quickly and dynamically transformed into this:

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>

Very handy indeed.

emmet

6. Image dimension extractor

This nifty little extension quickly extracts the dimensions (width and height in pixels) of an image or a CSS Background property. Handy if you’re making newsletters and coding an image-intensive HTML page.

backgroundimage

7. Interactive Linter

Of all extensions mentioned here, this would rank very very high as a necessity. Linters in text editors are nothing new, but Interactive Linter for Brackets is one of the best I’ve seen yet. It’s unobtrusive, fast and does an excellent job and watching out for coding errors.

il

8. Minimap

If you ever wanted Brackets to look and behave more like Sublime Text Editor, Minimap would be a great starting point.  The awesome minimap feature of Sublime is available to Brackets via an extension and it works just as well.

minimap

9. Right Click Extended

This basic extension doesn’t do much apart from adding a few additional, yet much needed functions to the right-click menu like the ability to Cut, Copy and Paste. Why these basic functions are missing from the core of Brackets is a little weird, but this extension makes up for that.

rightcl

10. Reasonable Comments

Commenting is a workflow process we should all be doing for easier readability of future code. This extension simpifies commenting by automating the comment block to extend dynamically as you press enter.

comments

 


Brackets 1.0 by Adobe was initially released on the 4th November 2014. It’s actively developed and is available for free on Windows, Mac and Linux. It’s open source, supports extensions and themes and has a Live Preview feature. At the time of writing Brackets version 1.5 is latest available version.

Welcome to Post #0001

Reading Time: < 1 minute

Hello and welcome to my blog. A separate section of my website where I aim to share knowledge, help, inspire or inform interested individuals and like minded people on various topics.

You may be wondering why this section is cut off from the rest of my website and looks so vastly different? Simple, I want it that way. I feel this blog has the potential to be something bigger and don’t want to confuse it with my personal website.

I also want a clean, minimalistic look to the blog so that information is easy to read, quick to access and commentable thanks to the power of WordPress.

I don’t have a consistent blog update schedule. Instead, I will be updating the blog where and when it’s needed.

I’m really hoping the articles I have in mind will help out other curious information seekers. Until them, bookmark this site, sit back and relax…

Side-note: The blog update for my site was built using the newly released WordPress 4.4 on PHP 7 and MySQL 5.7 on my home Linux server. Unfortunately I’m at the mercy of my website hosting company who doesn’t just run PHP 7 / MySQL 5.7 just yet.