Coding Archives - Hamza Shatela https://hamzashatela.com/category/coding/ WordPress Developer Sat, 05 Jan 2019 02:56:39 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 https://hamzashatela.com/wp-content/uploads/2017/10/cropped-hamza-shatela-32x32.jpg Coding Archives - Hamza Shatela https://hamzashatela.com/category/coding/ 32 32 How to Change the Style of Any Element Within Your Page or Post https://hamzashatela.com/how-to-change-the-style-of-any-element-within-your-page-or-post/ Mon, 20 Nov 2017 23:04:35 +0000 https://hamzashatela.com/?p=1971 How to Style Element Within Page or PostWhether you are looking to create an art-directed experience on your blog or magazine website, or just want to change simple things like header color, menu link color, or a font on specific posts or pages, in most cases you need to use of CSS.  If you aren’t familiar with how to add a style

The post How to Change the Style of Any Element Within Your Page or Post appeared first on Hamza Shatela.

]]>

Whether you are looking to create an art-directed experience on your blog or magazine website, or just want to change simple things like header color, menu link color, or a font on specific posts or pages, in most cases you need to use of CSS.  If you aren’t familiar with how to add a style sheet to your website, read this article before you proceed.

Styling with CSS

Let’s say you have an element like an <h1> or a <p> and you want to give this element a unique style , well you can easily do this by adding this code to your .Css section.

p{
font-size:18px; /* Changes the font-size to 18px for all <p> elements within the same post or page that this code has been added to*/
}
h1{
color:red; /* Changes the font color to red for all <h1> elements within the same post or page that this code has been added to*/
}

IDs and Classes are Selectors

However, what if you have multiple <p> elements and you want to target specific ones or just one of them. This is where IDs and Classes come in. For example <p id="contentHolder"></p>, this will give us the ability to target this specific <p> by referring to it’s ID. Same goes for Classes, you can just add a class like so <div class="customClass" ></div> and refer to that class by calling it’s class name. Those two features are basically used as selectors for CSS and other languages like JavaScript to handle. But how are they used and how different are they?

ID’s

  • Unique and can’t be repeated in two different elements on the same page.
  • Each page can have only one of the same ID.
  • Referred to by using the # before the ID name
  • Overwrites Classes styles, since it is more dominant. (Specificity level 2 for ID’s Vs. level 5 for Classes)
#uniqueIDName{
background-color:red;
width:100px;
height:100px;
}/*Gives the ID uniqueIDName the properties placed between the {}*/

Classes

  • The same class can be used multiple times on multiple elements.
  • Classes have a lower level specificity than ID’s
  • An element can have more than one class by separating each with a space like so:
<div class=”myfirstClass mySecondClass”></div>
<div class=”mySecondClass”></div>
  •  Referred to by using the . before the class name
.className{
background-color:red;
width:100px;
height:100px;
}/*Gives all the elements with this class the properties placed between the {}*/

Elements Can Have ID’s and Classes at The Same Time

CSS doesn’t prevent you from having both selectors given to the same element. Actually, it is better to do so because you might have a list of products on your website, where each one has a specific ID but all products have the same class, and if you want to refer to a specific product, you have it’s ID set.

<span class=”myFirstClass” id=”uniqueID”></span>

The post How to Change the Style of Any Element Within Your Page or Post appeared first on Hamza Shatela.

]]> Add Custom CSS To WordPress Post or Page https://hamzashatela.com/add-custom-css-wordpress-post-page/ Sun, 19 Nov 2017 15:24:15 +0000 https://hamzashatela.com/?p=1913 Add Custom CSS To WordPress Post or PageHave you ever wanted to style an element in a certain page or post within your WordPress website in a beautiful way that will stand out? Fortunately, there is a plugin that will help you do that without the use of child themes. Adding Custom CSS To Your WordPress Post or Page – CSS Plugin

The post Add Custom CSS To WordPress Post or Page appeared first on Hamza Shatela.

]]>

Have you ever wanted to style an element in a certain page or post within your WordPress website in a beautiful way that will stand out? Fortunately, there is a plugin that will help you do that without the use of child themes.

Adding Custom CSS To Your WordPress Post or Page – CSS Plugin

CSS Plus is a plugin that will help you by adding a CSS editor under the Visual tab in any page or post of your website.

CSS Editor

How to Setup the Plugin

To be able to use this feature, navigate to your “plugins Tab” in your wordpress dashboard, and click “Add New” plugin. In the search bar, type and search for CSS Plus. Search in the list of plugins for a Css plugin by Paulo Calixto.

After you have installed the plugin by clicking INSTALL NOW, you then have to activate it by clicking on ACTIVATE NOW in the list of installed plugins.

Once it is installed and active, you can now style any page or post of your website with the CSS Editor which is found in your “page/post” page. Any Additional code you add to the “Editor Section” will be included by default in the <head></head> tags of selected page.

Css Plugin Support

  • SUBLIME TEXT BINDINGS
  • SIMPLE VISUAL
  • INLINE LESS
  • COMPRESSED CONTENT
  • EASY INSTALLATION
  • AUTO UPDATES
  • TROUBLESHOOTING
  • Different language

Animation in CSS helps you manipulate an element on your website in a stylish way. Whether you want an element to bounce up and down ten times, or continuously change colors, Keyframes help you do that. To learn more read how to Animate elements using CSS Keyframes?

How to Create a Custom Page in WordPress

Customizing the Page templates in WordPress is a great way to add structural variations or highly customized functionality and design to your website. Custom WordPress page templates are easy to create and simple to modify. Follow the steps in this article “How to Create a Custom Page in WordPress” to start structuring your page layout as you wish.

The post Add Custom CSS To WordPress Post or Page appeared first on Hamza Shatela.

]]> Animating elements with CSS Keyframes https://hamzashatela.com/animating-elements-with-css-keyframes/ Sun, 19 Nov 2017 15:03:16 +0000 https://hamzashatela.com/?p=1874 Animating elements with CSS KeyframesSyntax and What it Does. Animation in CSS helps you manipulate an element on your website in a stylish way. Whether you want an element to bounce up and down ten times, or continuously change colors, Keyframes help you do that. Syntax .yourCustomClassOrID{ animation-name: myAnimationName; animation-duration: 6s ; /* or 6000ms */ animation-iteration-count: 2; /*

The post Animating elements with CSS Keyframes appeared first on Hamza Shatela.

]]>

Syntax and What it Does.

Animation in CSS helps you manipulate an element on your website in a stylish way. Whether you want an element to bounce up and down ten times, or continuously change colors, Keyframes help you do that.

Syntax

.yourCustomClassOrID{
animation-name: myAnimationName;
animation-duration: 6s ; /* or 6000ms */
animation-iteration-count: 2; /* or infinite */
animation-direction: normal; /* or alternate */
animation-delay: 1s; /* or 1000ms */
animation-fill-mode: both; /* or backwards, forwards, none */
animation-timing-function: ease; /* or ease-in, ease-out, ease-in-out, linear, cubic-bezier()*/}

However, there is a shorthand for this property, and it goes like this:

.yourCustomClassOrID{
animation: myAnimationName duration delay iteration-count direction fill-mode;}
Order doesn’t matter if you don’t have your duration and delay set, otherwise you have to follow this order.

To start styling your animation, we use the @keyframes rule, which is what manipulates the element from one style to another:

@keyframes myAnimationName{
from{ color: white }
to{ color: red }
/*From white color to red color within the duration you set in the animation property */}

Sounds easy right? Well, for this property, you also need to include prefixes to support cross-browser compatibility, and the way you initialize prefixes is the following:

.yourCustomeClassOrID{
-webkit-animation: myAnimationName 3s infinite; /* Safari 4.0 – 8.0 */
-o-animation: myAnimationName 3s infinite;  /* Opera 12.0+ */
-moz-animation: myAnimationName 3s infinite;  /* FireFox 5.0+ */
animation: myAnimationName 3s infinite; /* IE 10.0+ */}

@-webkit-keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}

@-moz-keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}

@-o-keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}

@keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}
/*Any % from 0% to 100% can be used to set intervals between each animation*/

Animation Example

This concludes Animating with keyframes. The only limit to animating with keyframes is your imagination, so go out and and start animating!

The post Animating elements with CSS Keyframes appeared first on Hamza Shatela.

]]> Increase Security on Your WordPress Website https://hamzashatela.com/increase-security-wordpress/ Thu, 16 Nov 2017 17:01:59 +0000 https://hamzashatela.com/?p=1760 Security on WordpressHow to Increase your Website’s WordPress Security Options To date, up to 14 million websites are hacked every year. If you run a WordPress blog/website that is setup through standard installation options, you’re probably going to experiencing a brute force attack attempting to log into the WordPress dashboard. If you haven’t been subject to it yet,

The post Increase Security on Your WordPress Website appeared first on Hamza Shatela.

]]>

How to Increase your Website’s WordPress Security Options

To date, up to 14 million websites are hacked every year. If you run a WordPress blog/website that is setup through standard installation options, you’re probably going to experiencing a brute force attack attempting to log into the WordPress dashboard. If you haven’t been subject to it yet, consider yourself fortunate. Fortunately, there are a wealth of strategies to deal with security concerns, and the best strategy is to deploy multiple strategies to increase your website’s WordPress security options. Bear in mind that hacking attempts don’t happen at a predictable pace. Months can pass by without a single malicious login attempt and then suddenly, a few hundred (even up to a couple of thousand attacks) can occur during a short period of time. I’ve seen many website that were breached because of reckless security standards. There are however, ways to protect your website from these attempts.

In this article, I’m going to show you the techniques that I use to protect my blogs and website that are built on WordPress, and aim to help you use similar techniques to protect your own.

Step 1: Secure your login page and prevent brute force attacks

  1. Set up website lockdown and ban users
  2. Enable two-factor authentication
  3. Use your e-mail address to log in
  4. Rename your login URL
  5. Update your passwords regularly
  6. Add security questions to your WordPress login page

Step 2: Secure your admin dashboard

  1. Protect the wp-admin directory
  2. Use SSL to encrypt your data
  3. Secure the credentials of your admins and collaborators
  4. Change the admin username
  5.  Monitor your files

Step 3: Secure the database

  1. Change the WordPress database table prefix
  2. Back up your site regularly, learn how to Backup WordPress Website Using Plugins
  3. Set strong passwords for your database

Step 4: Secure your hosting setup

  1. Protect the wp-config.php file
  2. Disallow file editing
  3. Connect the server correctly
  4. Set directory permissions carefully
  5. Disable directory listing with .htaccess

Step 5: Secure your WordPress themes and plugins

  1. Update regularly
  2. Remove your WordPress version number
  3. Add Simple History Plugin

Step 1: Secure the login page and prevent brute force attacks

WordPress login page URL is like fire on flag. Everyone knows that to access a wordpress backend you need to go to the login page, and that is the reason why people try to force their way in.
Just add /wp-login.php or /wp-admin/ at the end of your domain name and there you go. Here are some suggestions for securing your login page:

  1. Set up website lockdown and ban users

Lock down feature, lock the site immediately whenever there is a failed login attempt with repetitive wrong password used to breach it. The plugin will recognize that there is a hacking attempt and will prevent the IP address from accessing the website’s backend. You can specify a the number of failed login attempts after which the plugin bans the attacker’s IP address. I-Themes Security plugin is one of the best such plugins in the market, and I’ve been using it for several of my blogs.

  1. Enable Two-Factor Authentication

2-factor authentication (2FA) at the login page is another good security measure. I advice you to use a secret code while deploying 2FA on any websites. The Google Authenticator plugin helps with that in just a few clicks.

  1. Use your E-mail to Log In

Using an email ID instead of a username is a more secure approach. 85% of Usernames are usually (Admin or your name), while email IDs are not. additionally, any WordPress user account is always created with a unique email address, making it a valid identifier for logging in. Install and activate WP Email Login it requires no configuration at all.

  1. Rename your Login URL

Now, replace the login URL. The concept is to restricts an unauthorized person from accessing the website. Only users who have the unique URL can visit the login page.
For Example:
Change wp-login.php to something unique; e.g. my_secret_login
Change /wp-admin/ to something unique; e.g. website_users_Steaks
Change /wp-login.php?action=register to something unique; e.g. Developer_registeration_portal

  1. Update your Passwords Regularly

Update and change your password regularly (a good rule of thumb is every three months). Add uppercase and lowercase letters, numbers, and special characters within your password to improve password strength.

  1. Add Security Questions to your WordPress Login Page

Adding security question to WordPress login and registration page is simple. Install and activate WP Security Question from WordPress plugins directory. WP Security Pluginenables security question option on WordPress registration, login and forgot password screen.
Once the plugin is installed on your website, navigate to Settings> WP Security Questions> Settings. By default, this plugin has many questions added.  You can add or remove any questions from the list.

Login Screen: Your login screen will look like this. From here, you need to provide your username, password, and security answer.

Step 2: Secure your admin dashboard

  1. Protect the wp-admin directory

Use the AskApache Password Protect plugin for securing the admin area. With this plugin, the website admin can access the dashboard by submitting two passwords. One protects the log-in page, and the other the WordPress wp-admin. If the website users are required to get access to some particular parts of the wp-admin, you may unblock those parts individually.

  1. Use SSL to Encrypt Data

SSL certification (Secure Socket Layer) provide security for your website by encrypting communications between the server and the person visiting the website. It is required to be used on e-commerce sites when accepting credit card payments online. Any good hosting company like Hostgator, Blue host and Metropolitan host do offer free SSL with their hosting packages.
On October 2017 Google search console warned that Chrome (version 62) will show a “NOT SECURE” warning when users enter text in a form on an HTTP page, and for all HTTP pages in Incognito mode. The following URLs on your site include text input fields (such as < input type="text" > or < input type="email" >) that will trigger the new Chrome warning.

  1. Secure the Credentials of your Collaborators

If you run an e-commerce website, blog, or normal website, you will have to deal with collaborators (Authors, shop keepers, editors, admins). To prevent a breach in security from hackers, by using a collaborator’s username and password because it might have a lower security measure than the admin’s password. Use a plugin like Force Strong Passwords for your users if you want to make sure that whatever passwords they use are secure.

  1. Change the Admin Username

While installing word press for the first time, new users choose “admin” as the username for your main administrator account. Technically speaking you are providing the hacker with the username, and all he need to figure out is the password.

If you already installed the iThemes Security plugin it can help you stop such attempts cleverly by immediately banning any IP address that attempts to log in with that username.

  1.  Monitor Your Files

If you have developer who you collaborate with, you might need to keep an eye on what plugins or files the developers are using on your website. You can monitor the changes to the website’s files via plugins like Wordfence. Keep a sharp eye on any file changes, or new files being introduced to the system, a backdoor access file can be implemented on your website and can be used to access your website anonymously.

Step 3: Secure the Database

  1. Change the WordPress Database Table Prefix

    By default when installing WordPress, the system creates Database in phpmyadmin to save all the data needed for your website. This data base has a default prefix wp-. Using the default prefix makes your site database prone to SQL injection attacks. Such attack can be prevented by changing wp- to some other term, e.g. you can make it mywp-, wpnew-, WPDBS-.

  2. Regularly Backup your Website

The technology is continuously being updates and improved, which by default will create new opportunities for hacker to access websites through discovering new breaches in the updates. To prevent this from happening, backup your website on monthly and maybe weekly basis (based on how much activity you have, and what type of website you run). There are several backup plugins in the market that you can install, but I always recommend to backup the site files and database manually at least on quarterly basis.

  1. Set Strong Passwords for your Database

Not only your Wp-admin is protected by a password, even your database has a password, WordPress uses to access the database. If you installed your wordpress blog, then this is not something new to you.  Make sure you have a strong password for the main database user. You can use Password generator tools to help you create random secured password.

Step 4: Secure your Hosting Setup

  1. Protect the wp-config.php file

The wp-config.php is the core of your wordpress website, in fact the most important file in your site’s root directory.  Let us change the of the wp-config.php file so it becomes harder to locate. Follow these steps:

  • Access your Cpanle through your hosting account or access through FTP
  • Locate the wp-config.pfp file in your root directory
  • Move  wp-config.php file to a higher level than your root directory

  1. Disallow File Editing

If a user has admin access to your WordPress, it means they can edit any files that are part of your WordPress installation. This includes all plugins and themes from Appearance>editor>function.php or any other file.

To prevent users from accessing  Add the following code to button of your wp-config.php file:
define('DISALLOW_FILE_EDIT', true);

  1. Connect the Server Correctly

When setting up your site, connect the server only through SFTP or SSH. SFTP is always preferred over the traditional FTP because of its security features that are, of course, not attributed with FTP. Many hosting providers such as Hostgator, Blue host and Metropolitan host offer this service as part of their package.

  1. Set Directory Permissions Carefully

Wrong directory  permission scheme of WordPress can be devastating, especially if you’re working in a shared hosting environment. To secure the website at the hosting level, change files and directory permissions., and set the directory permissions to “755” and files to “644” protects the whole file system – directories, sub-directories, and individual files. This can be done either manually via the File Manager inside your hosting control panel, or through the terminal (connected with SSH) – use the “chmod” command.

  1. Disable Directory Listing with .htaccess

Every directory on your website should have an Index.html file. For example, if you create a directory called “Client portal ”, you can see everything in that directory without typing in any password simply by typing https://www.yourwebsite.com/Client-portal/ in your browser.

Step 5: Secure your WordPress Themes and Plugins

  1. Update Regularly

WordPress updates are frequent and do not occur at set times. These updates are meant to fix bugs and sometimes have vital security measures. Not updating your themes and plugins in a timely manner might put your website at risk. Update your WordPress website regularly, and don’t forget to update themes and plugins as well.

  1. Remove your WordPress Version Number

You can hide your wordpress version number with almost every security plugin that is mentioned above. The version number makes it easier for hacker to know the breached of the system based on the wordpress version you are suing

  1. Add Simple History Plugin

Keep track of what other people are doing. Simple History shows recent changes made within WordPress, directly on your dashboard or on a separate page.

The post Increase Security on Your WordPress Website appeared first on Hamza Shatela.

]]>