Skip to main content
Atom IDE Logo

My Atom Package and Theme setup

I have recently moved over to Atom from Brackets. I didn’t want to change IDEs but Brackets doesn’t play well with ReactJS (I talk about that a little more in my Beginners Guide to React).

 

When I was using Brackets I had it set up the way I thought was perfect. A number of plugins to allow me to add a section of HTML with the press of a key, or auto-correct on a function when I typed in incorrectly in my sleepy stupor. Upon finding myself in a new program, I wanted to replicate that set up. Turns out that was possible!

 

Here is my current (and probably about to grow) setup in Atom.

 

Theme:

Base16 Torromow Dark

Although this is installed as standard with Atom, god I love it. Slightly darker than the theme I was using with Brackets, and a lot nicer on the eyes.

https://github.com/atom/base16-tomorrow-dark-theme

 

 

Packages

Emmet

This goes without saying. It allows dynamic snippets, speedy coding and is customizable.

https://atom.io/packages/emmet

 

File Icons

Rather than having boring grey default icons, this packaged added a bit of colour, and made it easy to see what I was working on. A worthy addition.

https://atom.io/packages/file-icons

 

WordPress AutoComplete

Autocomplete support for WordPress actions and filters in the Atom editor. A massive help when in the zone.

https://atom.io/packages/wordpress-autocomplete

 

Docblockr Package

Designed to make writing documentation faster and easier. Use standard documentation formatting, this just helps you along.

https://atom.io/packages/docblockr

 

Autocomplete+ Paths Suggestions

Adds path autocompletion to autocomplete+ depending on scope and prefix. Supports custom scopes defined by the user.

https://atom.io/packages/autocomplete-paths

 

I am always looking to make my workflow faster, and easier so if you can suggest any other great Atom packages, stick it in the comments!

Good Designer - Bad Designer

Creative / Development Inspiration 26

Good Designer, Bad Designer

Tarus Kohli breaks down the different between good designers and bad designers with some great sketches.

https://uxplanet.org/good-designer-bad-designer-eff79d356a75

 

A Beginner’s Guide to Webpack 4 and Module Bundling

This article is aimed at those who are new to Webpack, and will cover initial setup and configuration, modules, loaders, plugins, code splitting and hot module replacement. This is something I am yet to get into, but once I have finished my current project will be jumping all over.

https://www.sitepoint.com/beginners-guide-webpack-module-bundling/

 

Gooact: React in 160 lines of JavaScript

How to build own React clone in a matter of minutes. In this tutorial you will be shown how to write a fully functional React clone, including Component API and own Virtual DOM implementation.

https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

 

Toast UI Calendar

I have mentioned a Toast library before on Thoughts and Stuff. The Toast UI Chart. This time they have created a fully customisation calendar! Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

https://github.com/nhnent/tui.calendar

 

Choosing cameras in JavaScript with the mediaDevices API

The project I am currently involved in has me looking into implementing device cameras across different browsers and devices, if the project had been built on Node I would have most certainly needed this article. Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them.  This simple tutorial walks you through the steps.

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html

 

First Look at WordPress Gutenberg

The new Gutenberg editing interface is a major change coming to WordPress 5 this year, and it will affect WordPress plugin developers, theme designers, and website creators. In this video you will be shown you how to set up Gutenberg as a plugin on your existing site and how to get started using the Gutenberg editor to create content.

https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg–cms-31036

 

Simple WordPress Login Page Tutorial

Simple WordPress Custom Login Page

As a site admin, or a user of the admin area of WordPress you will see a lot of the login page. It does the job for a personal blog, but if the site you are developing is for a client it probably shouldn’t be covered with the WordPress logo and links. These few snippets will help you customise the WordPress login page, and redirect it to a prettier URL. The final code can either be dropped into your functions.php file and work right off the bat, or be put into a plugin for installation in any theme.

 

WordPress provides several hooks and functions that can be used to completely overhaul the login page, allowing us to change the logo, background, font and colours of the whole page. I will only cover the basics, but with a few adjustments you could make changes such as linking it to the customizer (I will discuss that in another post).

 

Pretty Login Url

The standard login page for WordPress is www.yourdomain.com/wp-login.php, which for a developer is completely fine. However, explaining to someone who is not tech savvy what to type every time they forget how to get to the login page can be a nuisance.

 

A solution to this is to add a htaccess  rewrite for “wp-login.php” redirecting it to “login”.

 

<?php // Add rewrite rule and flush on plugin activation 
register_activation_hook( __FILE__, 'htaccess_activate' ); 
function htaccess_activate() { 
htaccess_rewrite(); 
flush_rewrite_rules(); 
} 

// Flush on plugin deactivation 
register_deactivation_hook( __FILE__, 'htaccess_deactivate' ); 
function htaccess_deactivate() { 
flush_rewrite_rules(); 
} 

// Create new rewrite rule 
add_action( 'init', 'htaccess_rewrite' ); 
function htaccess_rewrite() { 
add_rewrite_rule( 'login/?$', 'wp-login.php', 'top' ); 
} 
?>

 

To break down the rewrite snippet, the following occurs:

On Activation

Line 2 – When the plugin / theme is activated the htaccess_activate() function is run
Line 4 – It accesses the htaccess_rewrite() function
Line 16 – The WordPress function add_rewrite_rule is called

The add_rewrite_rule() function is used add information to the websites .htaccess file. In this instance ‘login/?$’ is the requested URL, the one we want the user to be directed too. .htaccess expressions can be confusing but to make sense of this line I will briefly touch on it.

 

“login/” – This is the URL ending you wish to use

“?” – This term means that the character directly before it (the “/” ) does not have to be there, it will work either way.

“$” – This signals the end of the string

 

For more htaccess expressions see: https://httpd.apache.org/docs/2.4/rewrite/intro.html

 

The second argument in add_rewrite_rule() is the redirect. In this case it is “wp-login.php”, and finally “top” which means we want to put the htaccess code at the top of the htaccess file.

 

Line 5 – It accesses the built in WordPress function flush_rewrite_rules()

 

flush_rewrite_rules() is used to remove all the htaccess code, and re-write it with the new code. This can be used for adding or removing, as shown in this example. It should only be used when activating or deactivating and plugin or theme. It is very server heavy and should never be used on the init hook.

For more info on flush_rewrite_rules() go to https://codex.wordpress.org/Function_Reference/flush_rewrite_rules

 

On De-Activation

Line 11 – When the plugin / theme is de-activated the htaccess_deactivate() function is run
Line 14 – It accesses the built in WordPress function flush_rewrite_rules()

 

Custom Logo and Link

Changing the logo

<?php //Remove login wordpress link 
add_filter('login_headerurl', 'remove_wordpress_login_link'); 

function remove_wordpress_login_link(){ 
return ""; // your URL here 
} 
?>

The login_headerurl is used to filter the URL of the logo on the login page. The default links to wordpress.org but we can alter it as shown above. Just add a new URL on line 6.

 

For more info on login_headerurl go to: https://codex.wordpress.org/Plugin_API/Filter_Reference/login_headerurl

 

Add Custom Link

The following code adds a link below the login section using the login_footer action. This could be used to link to extra documentation, or your own site to ensure your clients are always reminded of you.

 

The login_footer action adds code immediately below the default login screen.

 


<?php

function login_footer_link() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #999; text-decoration: none;" href="http://yourdomain.com">Click here for more information
</a>
</p>
<?php }
add_action('login_footer','login_footer_link');

?>

 

Making it pretty

Heres were you can get your design face on, The CSS below is fairly self-explanatory, I used Google Chromes Inspect console (ctrl + shft + i) to target the specific elements on the page and style them as needed.

 

The function login_enqueue_scripts() was used to target the scripts specifically on the login page. This should be used rather than including your CSS in the main CSS file, as that file is not loaded on the login page.

 

<?php
// add a new logo to the login page 
function login_logo_fix() { 
?>
<style type="text/css">
html, body {
background: #fff;
}
.login #login h1 {
padding: 0;
}
.login #login h1 a {
background-image: url( '<?php get_template_directory_uri();?>/login/logo.png') !important; );
background-size: contain;
width: 70%;
margin: 0 15%;
height: 60px;
}
.login #nav a,
.login #backtoblog a {
color: #fff;
}

.login #nav a:hover,
.login #backtoblog a:hover {
color: #0075c9;
}

</style>
<?php
}
add_action( 'login_enqueue_scripts', 'login_logo_fix' );
?>

For more information on login_enqueue_scripts() go to: https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts

 

To download the full code as a plugin (the CSS will need editing, but its a start):

https://github.com/justlikethisdesign/wp-customlogin.git

 

I hope this has helped you understand the basics of a few functions, as well as giving you a start on customising your login page. Let me know in the comments below if you have any queries.

WordPress Code Snippets

WordPress Code Snippets

When I first started building themes with WordPress, I spent a lot of time looking at other programmer’s code. I would find a snippet, pull it apart and learn from it. Rinse and repeat. I learnt a lot from this process, and still do. Other people will always be finding solutions to problems you have, or problems similar.

 

I have decided to start posting specific snippets of code that I use time and time again for other people to get some use out of them, and learn as I did.

 

All these snippets will be fully documented, so as to provide as much understanding as possible. I will also try to explain how they can be used, give ideas on how to adapt them, and link to other websites that I use myself.

Screenshot of Spoon plugin google

Turbo VM Extension injecting code

For those of you who have found the same thing. Enter Turbo VM Extension.

 

I was in the latter stages of developing a WordPress theme when I found a strange section of code inserted at the bottom of the page. I originally thought it was a mistake in my code as there was a large white space at the bottom of the page until I used the console log on Google Chrome and noticed the following:

 

<div id=”spoon-plugin-kncgbdglledmjmpnikebkagnchfdehbm-2″ style=”display:none”></div>

 

Upon Googling this issue I found the snippet turned up in a few places. At the bottom of a piece of code on Github, bottom of forum signatures, and inside the code of other WordPress themes. Always at the bottom.

 

That day I had downloaded Turbo.net Launcher, a browser emulator. To create a login for the launcher I used spoon.net (seeing the connection now?). Turbo VM Extension is a Google Chrome Extension. When it is switched on, for some reason it injects itself into specific websites.

 

For now I have disabled the extension whilst I research it a little more…