Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
This post is originally published on Designmodo: Guide to Successful Thank You Email Newsletters, Examples and Best Practices
A little appreciation goes a long way. Showing customers how much they mean to you is an excellent way to build strong, healthy relationships. In the email marketing world, there is a unique tool for this: the Thank You email …
For more information please contact Designmodo
Do you want to install WordPress in a subdirectory? Installing WordPress in a subdirectory allows you to run multiple WordPress instances under the same domain or even a subdomain name. In this article, we will show you how to install WordPress in a subdirectory without affecting the parent domain name.
Normally, you would want to start a WordPress website on its own domain name (for example, wpbeginner.com). However, sometimes you may want to create additional websites on the same domain name.
This can be done by either installing WordPress in a subdomain (http://newebsite.example.com) or as a subdirectory (http://example.com/newwebsite/).
One question that we get asked is which one is better for SEO?
Search engines treat subdomains differently from root domain names and assign them rankings as a separate website.
For instance, search Engines consider WPBeginner and our WPBeginner Videos website as two separate websites.
On the other hand, sub-directories directly benefit from the domain authority of the root domain thus ranking higher in most cases.
One way to create separate WordPress sites in both subdomain or subdirectory is by installing WordPress multisite network.
However, if you want to keep two websites managed separately, then you can install different instances of WordPress. You can also use WordPress site management tools to set up a single dashboard for managing your multiple WordPress installations.
There are no special requirements to install WordPress in a subdirectory. If you already have a WordPress website in the root domain name, then you are good to go.
All top WordPress hosting companies make it very easy to install multiple WordPress websites using the same hosting account.
For instance, if you are using Bluehost, you can add a new WordPress website from your hosting dashboard.
However, please keep in mind that most shared hosting accounts have limited server resources. A sudden traffic spike on one of your websites will affect the performance and speed of all other websites on the same account.
If you are just starting out, then you can do that on shared hosting. Keeping in mind that you’ll need to upgrade to a managed WordPress hosting as your business grows.
That being said, let’s take a look at how to easily install WordPress in a subdirectory.
First, you need to create a subdirectory or a folder under the main website. This is where you will install WordPress files.
Connect to your WordPress hosting account using a FTP client or File Manager in cPanel.
Once connected, go to the root folder of your website. Usually it is the /public_html/ folder. If you already have WordPress installed in the root folder, then you will see your WordPress files and folders there.
Next, you need to right click and select ‘Create new directory’ from the menu.
You need to be careful when choosing the name for your subdirectory. This will be part of your new WordPress site’s URL and what your users will type in their browsers to reach this website.
For example, if you name this directory travel-guides then your WordPress website’s address will be:
http://example.com/travel-guides/
Your newly created subdirectory is empty at the moment. Let’s change that by uploading WordPress files.
First you need to visit WordPress.org website and click on the download button.
Your browser will now download the zip file containing the latest WordPress software to your computer.
After downloading the file, you need to select and extract it. Mac users can double click the file to extract it and Windows users need to right-click and then select ‘Extract All’.
After extracting the zip file, you will see ‘wordpress’ folder containing all the WordPress files.
Now let’s upload these files to your new subdirectory.
Connect to your website using an FTP client and go to the subdirectory you created in the first step.
In the local files panel of your FTP client, go to the ‘wordpress’ folder you just extracted.
Select all files inside the folder and then upload them to your new subdirectory.
WordPress stores all your content in a database. You need to create a new database to use with your new WordPress site installed in a subdirectory.
First, you need to login to the cPanel dashboard of your WordPress hosting account. Click on ‘MySQL Databases’ under the databases section.
Note: Your hosting dashboard may look different than the screenshot above. You simply need to locate the ‘Databases’ section.
On the next screen, enter a name for your new database and then click on the ‘Create Database’ button to continue.
Your cPanel dashboard will now create the new MySQL database. Click on the Go Back button to return to the Databases page.
Next, you need to add a username and password for the database.
Simply scroll down to the ‘MySQL Users’ section and provide a new username and password. Click on ‘Create User’ button to continue.
Next, you need to give this newly created user privileges to work on the database you created earlier.
Scroll down to ‘Add user to database’ section. Select your MySQL username and then select your newly created database.
Click on the Add button to continue.
Cpanel will now grant the MySQL user full privileges on your newly created database.
Now that everything is in place, you can go ahead and install WordPress. Simply visit the directory you created earlier in a web browser by typing the URL like this:
http://example.com/your-subdirectory-name/
This will bring up the WordPress installation wizard. First, you need to select the language for your WordPress website and click on the continue button.
Next, you will be asked to provide your WordPress database name, database username, password, and host. Enter the database details and click on the submit button.
WordPress will now connect to your database and you will see a success message like this:
Click on ‘Run the install’ button to continue.
On the next screen, you will be asked to provide a title for your website and choose an admin username, password, and email address.
After entering your website details, click on ‘Run install’ button to continue.
WordPress will now set up your website and will show you a success message:
You can now go ahead and login to your new WordPress website installed in the subdirectory.
If you have a separate WordPress install in the root directory, then the .htaccess files of your subdirectory will cause conflict. This will result in 404 errors on your website.
To solve this, you need to edit the .htaccess file in your subdirectory WordPress install. Replace the code inside your .htaccess file with the following code:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /your-subdirectory/
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /your-subdirectory/index.php [L]
</IfModule>
# END WordPress
Don’t forget to replace /your-subdirectory/ with your own subdirectory name.
We hope this article helped you install WordPress in a subdirectory. You may also want to see our ultimate step by step WordPress SEO guide for beginners.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Install WordPress in a Subdirectory (Step by Step) appeared first on WPBeginner.
Heya, have been in the lookout for some good Javascript resources.
So far have been practicing from Interviewbit, Edureka and those freely available sources on the net.
It would be great if ya'll could share few important topics that are most likely to be asked in the interviews as well as topics that are crucial to work on projects in companies.
Thanks in advance.
If you aren’t using it yet the name Figma is surely a name that you’ve heard more and more over the last few years.
Figma is a relatively new design tool that is browser-based. This means you don’t need to install it locally or buy expensive licenses to give team members access to design files. This has made design more accessible than ever and that’s why many developers now find themselves needing to learn how to work with design tools.
Since many developers don’t have a lot of experience playing around in design tools we’ll cover all the basics developers need to know about so you can confidently navigate around Figma and extract any information you might need when working with the designs sent to you by a designer.
I’ll also cover some specific Figma features that make it easier for developers such as providing CSS information about elements used within the design.
Most shortcuts are written for both Windows and Mac, where the Ctrl key on Windows corresponds to the Cmd key on the Mac, and Alt is used for both Alt (Windows) and Option/Alt (Mac).
For example, Ctrl/Cmd + Alt + C is Ctrl + Alt + C on Windows and Cmd + Alt/Option + C on the Mac.
To understand the hype around Figma and why you suddenly find yourself needing to learn how design tools work as a developer, it’s helpful to look back on the developer handoff process before Figma was around as it has changed significantly.
Design teams used to send an email to the development team with dozens of attachments containing static images of the design, exported assets, and even word documents with the page copy. Developers usually didn’t have access to the full design files as licenses for design software were expensive and not strictly necessary. Communication and feedback were scattered across email, project management tools, and meeting notes. Everyone was struggling with keeping track of changes to the design; every time the design was updated, it needed to be sent to everyone involved — yet again.
As design tools modernized, this process got more streamlined. Designers would often use separate tools like Zeplin or Invision to handoff the designs to developers. Developers now had better access to the designs and had more tools available to extract information about typography, colors, and measurements. Although it was easier to find the latest version of a design for everyone, designers needed to work in separate tools and keep them in sync. A big improvement but still not perfect.
Figma is a design tool that is rapidly gaining in popularity and shakes up the design handoff process once again. Figma is browser-based so everyone can use it regardless of their operating system and without installing anything. It’s also completely cloud-based so everyone is always looking at the latest version of the design and has built-in collaboration tools making collaborating and communicating easier than ever.
If you want to follow along with this article (or just play around with Figma), I’ll be using this file to explain everything in this tutorial:
When you are added as a collaborator on a Figma design you can choose to open it in the browser or you can download the desktop app (available on Windows and macOS). The desktop app is not a native app but a cross-platform electron app like Slack and Visual Studio Code. The functionality of the browser and desktop versions is largely the same. The desktop app does have built-in support for using local fonts whereas the browser version requires installing the Figma Font Helper before you can use local fonts.
Figma’s interface is split into three major parts. In the middle, you’ll find a big canvas where all the designs are located. On the left side, there is a sidebar that contains the layers, assets, and pages of a file. The right toolbar contains all information about elements in the file.
A file can have multiple pages and every page has one canvas. Designers often use pages to separate and organize different parts of the file with separate pages for the design system, icons, or other file assets.
When opening up a new file for the first time, make sure to familiarize yourself with the different pages within the file. If the designer you are working with has made a separate page for all colors, typography, and icons it can save you time while building out the design.
Before we get to the good stuff, it’s important that you can quickly navigate around in Figma so you can work more efficiently.
When you open a file you’ll start on the largest zoom level that fits all the frames in the visible area.
Don’t worry too much about remembering these shortcuts for now, just know that they are available and you can always view these and other available shortcuts by pressing Cmd + Shift + ?.
Once you have used a shortcut it will be colored blue so you can easily see which ones you still need to learn.
When you’re opening a brand new project it’s helpful to set up all the basic styles first. Figma displays all the project styles in the right sidebar. Here you can easily find all the typography, colors, grids, and other styles used in the design.
Note that the project styles will only display if no element is selected. If you want to cancel your selection and view the project styles, simply click somewhere in the canvas or use the Esc key.
You can use this information to set up your layout, variables, and fonts in CSS. Simply click on the edit icon next to the style element to view all information about that style.
If you double click an element, it will select one nesting level lower every time you double click. This is a great way to drill down into an element until you get to the desired selection.
There are many more ways to select and navigate layers, this article just covers the basics that are used 80% of the time. Figma’s documentation teaches more ways to select and navigate layers.
Once you select an element, you can click the Code tab in the right sidebar to display all the CSS information about that element.
It’s important to note that the CSS is automatically generated and is not perfect, especially for positioning elements. Don’t copy all CSS 1-to-1 to your project but instead use it as a guide and a quick way to get information about elements.
Whenever you want to measure spaces between elements, correctly position elements, or even set the right margin or padding, all you need to do is select the element that you want to measure from, then hold the Alt and hover your mouse over the element you’d like to measure the distance to.
Depending on what type of file you are exporting there will be different export settings you can tweak. Images only have a scale multiplier and you can choose the file type (PNG, JPG, SVG or PDF). Figma will use the name of the layer as the file name but you can add a file name suffix. You can then export the selected element using the export button.
Quick tip: You can also quickly export an asset by right-clicking it, hovering on Copy/paste and copying the image or SVG code. This is useful if you don’t need to have custom export settings and just need a quick copy of a single element.
You can export each individual asset by selecting it and clicking the export button but you can also export all assets that are exportable at once.
If you want to export all the assets from the design in one go you can go to the main menu, and click Export.. under the File menu. You can also use the keyboard shortcut Shift + Cmd + E on MacOS or Shift + Ctrl + E on Windows.
This will display a list of all the items in the file that are marked for export. You can then inspect the dimensions, file type and exclude any files before making the final export. If you hover over the thumbnail of the assets it will display the file name that the asset will have when it’s exported.
If you need to make adjustments, clicking on the thumbnail of an asset will select that element in the canvas where you can easily adjust the export settings.
If you have a lot of exportable assets in a single file, you can use a slash “/” in your layer name to mark it as a group of assets. Figma will then automatically create a folder for that group and export the assets within that group to the subfolder.
Figma also supports a variety of animations for transition between states or pages, for opening modals or menus, for dragging and swiping actions on mobile and much more. You can preview these animations by clicking the play icon in the top right to open Presentation view.
To view the information about an animation, select the Prototype tab in the right sidebar and you’ll see the user flow displayed in blue arrows in the canvas.
Clicking on the arrow shows you all the information about that specific animation. Each animation consists of a trigger, an action, and a transition.
This simple animation opens a hamburger menu. You can see that the hamburger icon has an On Tap trigger, once it is triggered it will Navigate To the screen where the mobile menu is in an opened state. The transition type is a Smart Animate transition which means Figma automatically interpolates between these two states. It does this using an Ease Out animation function with a duration of 300ms.
This information is necessary to exactly replicate the animations in CSS but unlike all other element information, animations can not be found in the Code tab!
If anything isn’t clear and you’d like to ask someone else on the project for clarification. All you have to do is click on the chat bubble icon in the top toolbar or hit the C key to switch to the Comment tool.
You can now click anywhere in the design and start typing a comment or question about that element. Once you’ve finished writing your comment, you can use the V key to return to the normal cursor.
Note that not everyone will automatically receive a notification that you left a comment. If you want to be sure someone sees your comment you should mention them using the @ symbol just like on Slack or Twitter.
Every comment is visible to everyone who has access to the design as there are no private comments/chats. Once the issue has been resolved it can be marked as such and the comment will gray out.
We’ve covered a lot of ground so far in Figma and you should be able to navigate around and extract all the information you need from any Figma design file sent your way. Getting information about typography and colors, measuring margins, padding and position of elements, exporting assets and collaborating with other team members.
If you want to learn more about the tool, Figma’s documentation is a great place to start or search when you want to learn more about a specific feature.