Without a doubt, AdminLTE is one of the best Bootstrap Admin themes on the market. HTML and CSS3 verified by W3C, bootstrap responsive design, 1000+ icons, 6 skins, plugin support (currently there are 18 plugins), compatibility with major browsers and lightweight codes are some of its main features.
And because of the popularity, it has a big community to get support from. You can reach the community from the developer’s Github page or from the AdminLTE support topic of our Bootstrap Forum.
Before I tell you hot to use AdminLTE, you must download the latest version of the AdminLTE bootstrap admin template. You can download AdminLTE 3 from here.
How to use AdminLTE?
You have many options to use AdminLTE in your project. While you can use it with any programming language, I will explain and give you the resources for pure PHP, and later in the next posts, I will explain it for the Laravel framework and AngularJS also. These are the most common usages of AdminLTE.
Let’s start explaining. It doesn’t matter in which language you will use AdminLTE. There is only one download package ( here ). You download HTML files and you edit them in your needs. After downloading AdminLTE, extract it, and navigate to the root directory.
Here in the root directory, index.html, index2.html, and index3.html files are different designs of AdminLTE. You can start with one of them that fits more to your needs. If you open the codes of the preferred index file, you will see that the files in plugins and dist directories are used in the template. So we need these 2 directories in our project.
How to use AdminLTE in PHP?
If we will use AdminLTE in PHP, we can copy plugins and dist directories in a suitable directory in our project. I usually create this structure:
As you can see, I created an assets directory in the root. I copied the plugins directory and the contents of the dist directory inside this assets directory. So, all my assets are actually in one place now.
I copied the index.html file (the preferred one) to the root and renamed it to index.php because I want to use PHP codes inside this file.
Now, the CSS and JS links in index.php show the wrong directories. We need to change them. You can search and replace plugins/ with /assets/plugins/
In the same way, replace dist/ with /assets/ Because we don’t have a dist directory anymore. All the content of the dist directory is in the assets directory.
We are ready with making this page running in our server. If we upload the files to the server or to the root of our localhost, the page should show correctly.
I don’t know how you handle your PHP files but I usually use the common parts of the design in include files and I am calling these include files on my page.
There are two purposes of these include files. One is preventing code repetation. Second is; these are the sitewide common sections and when we need to change something in these sections, we have to change it in all files. If it is in include file, we change it once and it is changed all over the project.
I will explain how I do it. This is not a must, you can do it as you always doing it. But I ALWAYS do it in this way.
I create inc directory in the assets directory and create 3 php files inside it: meta.php, nav.php and footer.php
meta.php
I cut the lines starting from <!-- Tell the browser to be responsive to screen width --> until the last line of <head> section. I don’t take the first 3 lines in the <head> section. Because <title> tag’s content is different on each page. So, it is better to write it on the page, not in the include file.
And I don’t take the first 2 lines with 2 reasons. To not change the order of lines. And the second reason; these 2 lines are always the same in all pages and we never change them later. So we don’t need to have it in include files.
Now we write this line to the place under <title> tag: <?php include "assets/inc/meta.php"; ?> This line adds the include file’s content here.
nav.php
The second include file is nav.php that holds the content of site navigation. The navigation is frequently changing in the projects. So it is good to take it into an include file.
Cut the lines starting from <!-- navbar --> until <!-- /.navbar --> line including that line too into the nav.php. AdminLTE has a good and descriptive structure that you can see each section in the first look.
Write this line to the place where we cut the navigation code: <?php include "assets/inc/nav.php"; ?>
footer.php
The last include file is footer.php. We take the footer section of the project and the javascript includes into our footer.php include file to change them easily later.
Cut the lines starting from <footer class="main-footer"> until </footer> line including that line too. This is the footer part. But we said we will include also the javascript includes into this include file. after pasting the code, give a few lines of space and paste the code lines starting from <!-- jQuery --> until <script src="dist/js/demo.js"></script> including that line too.
Write this line to the place where we cut the footer code (be careful, it will be written to the place where we cut the <footer> tag): <?php include "assets/inc/footer.php"; ?>
Now, our system is ready. To create a page, you simply use the index.php as a template. Copy & paste it with a new name and use. This is the easiest way. Whenever you need a component, go open the related example file from AdminLTE package > pages directory and copy&paste the code of the component.
If you wanna use the exact structure of one of the example pages coming in the AdminLTE package (in pages directory) then again use the index.php as a template but copy and paste inner content from the example page into your template file. All should work smoothly.
Conclusion
So, you learned how to use AdminLTE in your PHP projects. This is the most common usage that many developers using. If you know an easier way to do the things, please share it in the comments section.
You can use the information I provided in your articles, videos, or any other places. I believe that sharing is caring. If you liked the post, don’t forget to share it with your colleagues.