Posted on

solve problem elementor preview could not be loaded

elementor preview could not be loaded notice is an area that sometimes occurs in elementor  the cool thing though is that usually it’s quite easy to fix the notice itself will try to point as close as possible to the issue such as a missing theme or an htaccess file or perhaps an HTTP error code however they might be cases where you will see more general notice  I’ll show you how you can easily troubleshoot and fix this error step-by-step so you can get back to designing a website with elementor in no time before we get started it’s important to know that if you get this error message on a work on this page such as the check out our shop page it’s normal because these pages can only be edited with the week honours builder

which is an elementor pro feature this error also occurs when you’re trying to edit your blog page with elementor or when you said a regular page as your posts page you can click on preview debug to see which pages are actually trying to edit in this case you need to use elementor pro theme builder instead of trying to directly edit with elementor

ok let’s dive in and see how to solve this error and easiest thing to do

is just to try editing incognito mode in your browser this rules out issues with add-ons or browser cache so first copy the URL and interim click on the three dots in Upper right-hand corner and choose new incognito window and window appears you’ll see this incognito icon indicating that you’re in fact in incognito mode go ahead and paste the URL log in again to see if the error persists you should also make sure that no addons are working in incognito mode you can also try a different browser altogether now if the issue still present you should ask yourself have I recently installed any new plugins or update existing ones in most cases loading issues are caused by conflict between plugins or themes so in order to confirm this you should activate safe mode it creates a safe environment that isolates elementor and WordPress

the cool thing though is that usually it’s quite easy to fix the notice itself will try to point as close as possible to the issue such as a missing theme or an htaccess file or perhaps an HTTP error code however they might be cases where you will see more general notice  I’ll show you how you can easily troubleshoot and fix this error step-by-step so you can get back to designing a website with elementor in no time before we get started it’s important to know that if you get this error message on a work on this page such as the check out our shop page it’s normal because these pages can only be edited with the week honours builder which is an elementor pro feature

this error also occurs when you’re trying to edit your blog page with elementor or when you said a regular page as your posts page you can click on preview debug to see which pages are actually trying to edit in this case you need to use elementor pro theme builder instead of trying to directly edit with elementor ok let’s dive in and see how to solve this error and easiest thing to do is just to try editing incognito mode in your browser this rules out issues with add-ons or browser cache

so first copy the URL and interim click on the three dots in Upper right-hand corner and choose new incognito window and window appears you’ll see this incognito icon indicating that you’re in fact in incognito mode go ahead and paste the URL

log in again to see if the error persists you should also make sure that no addons are working in incognito mode

you can also try a different browser altogether now if the issue still present you should ask yourself have I recently installed any new plugins or update existing ones in most cases loading issues are caused by conflict between plugins or themes so in order to confirm this you should activate safe mode it creates a safe environment that isolates elementor and WordPress

from The Themes and plugins that might be causing the error

there are two ways you can activate safe mode you can click the enable safe mode button that pops up at the bottom of the screen we can go to elementor tools and in general select enable from the safe mode drop down and click the save changes button using safe mode opens the elementor editor on a clean version of WordPress without loading a theme or any plugins for elementor and elementor pro plugins are deactivated and an empty theme file is loaded it’s also important to know that safe mode doesn’t impact your side front end it only impacts the editor if it’s always the issue we can safely say that it isn’t caused by elementor or elementor

rules out the possibility of a been caused by the hosting which leaves us with third-party plugins and themes as potential culprits so keep this as a rule of them if activating safe mode helps it means that the issue is either plugins or theme related so after successful debugging with safe mode you need to follow these steps to solve your issue activate the recently installed or updated plugins if it solves the issue you know that one of these plugins is the culprit

so reactivate each plug-in one at the time and test your site with each reactivation keep testing until you find the plug-in that is causing the error once identified you can get in touch with the plug-in developers to request assistance or using another plug-in with similar functionality if the issue still remains after having checked or plugins you need to have a look at the theme so first check that the theme file exists got it dashboard appearance and check to make sure that your theme is selected and active

if your theme is not a selected no active go ahead and install or reinstall it the next thing

you should do in case the error notice still shows is switched to a different theme go ahead and switch to a default WordPress theme such as 2016 or 2019 this helps rule at an issue with the Themes code if switching to a default theme

the issue then the theme conflict is causing the error in this case you should contact your theme support and ask them to make sure that the WordPress default loop is used in your layout now it’s safe mode doesn’t solve the issue it means that the issue most likely is related to the hosting so contact your hosting provider and go through the following steps first will try to save a permalinks again this will regenerate the HDX ES file which might just solve the problem

in the WordPress dashboard and the settings are permalinks and it’s saved structure updated notice now go back to your page and check if the error is resolved if not you can also try to change the permanent structure to plane if it wasn’t already some servers do not lie to write to the htaccess file and as a matter of fact you can always modify a permanent structure and editing elementor so hit save changes and check again the next thing you should do is very far with your hosting provider that your WordPress install includes the htaccess file

if for some reason you still stuck with the error message you most likely dealing with an HTTP error that is following steps are for advanced users and should be performed by a hosting provider or another professional if you’re dealing with an HTTP error than in the area of the line that points to the issue will be the HTTP

error code followed by message just like you see

hitting the preview debug link will try to open the preview in a new regular page so not in the editor you should see the area again in raw format which may provide more info for developers to solve the issue another thing you should do is verify that there isn’t a redirect on the page if you’re receiving 403 errors you should check the following first off you may have a corrupt htaccess file.

contact your hosting provider to see if this is the case if this didn’t help solve the issue then your file permissions may not be correct ask your hosting provided to check that your WordPress directories and files have the correct permissions for a 3 hours Michael’s occur due to a security plug-in to sort this out activate the learning mode of the plug-in or contact their support this is you can also be due to the firewall of your server which is something you should check with your hosting company

now if you’re receiving 401 errors you are attempting to access a page that requires authentication

if the page shouldn’t be asking for authentication contact your hosting provider for help in removing this requirement or check security plugins you may be using for options to turn this off if you receive 500 errors while using elementor you have to check the error logs of your server to see what the issue is these errors are so related so the dogs need to be sent to your hosting company before hand if you do not know how to produce PHP error logs please send this guy to your hosting company most of the time this error message is received because of a memory limitation the memory limit has to be set to at least 128mb according to your requirements you can go to elementor system info WordPress environment

to check it out there are other things that can lead to this issue for instance a fatal error when issued with a third party plug-in and without the error logs it’s not possible to know what the exact issue is the elementor system info page has logging capabilities as well so if the error 500 results from a bag in the code you should be able to see the PHP error message there it could look something like this so if memory isn’t the issue perhaps a plug-in is causing the error you can identify the culprit here after the plug-in directory now

there are some other less common reasons for this error such as conflicts with membership plugins so contact your hosting provider and check your permissions on Pages built with elementor and membership plugins and other less common possible causes for this error might be an issue with cloudflare rocket loader we have added a flag that disables rocket loader for the elementor scripts in the editor for version 2.5 an app you can check out this link to learn more about solving issues by creating specific rules in cloudflare if your hosting company is not able to solve the issue and you are a pro User you can send it ticket with the error logs to support via the support at elemental.com or check out our fatal error good hear well that’s it now you know how to troubleshoot and fix the cannot be loaded error step-by-step

Posted on

premium WordPress themes development -03 How to make our website dynamic


Hello guys welcome back in my website in this tutorial we are going to learn what is template tags and how to make our website dynamic,


 so, what is template files?  template files  are the way to make your website dynamic and template  tags is the way to call specific template to be placed and specific area in your page

so let’s put this in to Action and see what we can do?
I  will just place here basic HTML tags
 so here HTML for language and here charset and here viewport and the head body Header and main and footer,
  for now our website is static. So, here is Header  let’s point  here h1 and we call it footer Let’s open our website . so, here is our head and footer


but the website is static now

how we make it dynamic so well first thing we need to change the language we will change the language attribute because it can not be hardcoded like this So, how we change it.we will just the delete this, ok and we open PHP tag and we write language attribute and we close the tag so this is the way  to change the language to be dynamic .
users can use the themes  you create by any other language.
 so let’s check now. if we go to our admin area ,setting, general, change the language to any other language Espanol for example.

 save changes. ok ,let’s check  ok, now here the language is Espanol so, this Is the first step to make the language dynamic which any user change any language he want so let’s make it back English
so, this guys is very important because your themes can you sold all over the world

And the people can use other different language other things that we need to changed  to be dynamic here charset.
 we will just delete this and we open php tag and we call blog info() and this a accept parameter . which we get our blog info(),
 so last thing we need to do to make you footer and your header fully dynamic,
 that we will go that our themes directory and we will create

footer.php and Header.php,


 click new , file,  save as, go our themes directory,
  then  we will create header.php save it ,  and we will create footer.php, save .
  then we will go to our index and we will talk all the header we go to the new Header , files , save it , we go to index again we delete this and we take our footer, copy. we go to footer.php, so then we will back to index


 click new , file,  save as, go our themes directory,
  then  we will create header.php save it ,  and we will create footer.php, save .
  then we will go to our index and we will talk all the header we go to the new Header , files , save it , we go to index again we delete this and we take our footer, copy. we go to footer.php, so then we will back to index

And we will open php tag and we will write get_Header and we write down get_footer  let’s refresh,
 we have the same thing that’s mean our header and footer is working,
 if we go to Header . we make any change ,
we change word our Header we writed hello, save .
refresh, ok. now our Header and our footer is completely dynamic. Ok.
So, this was for now. so one last thing we need to add before we finish.
 we go to Header and we opened the php tag.

 and we call it wp_head(),  and we go to footer and open PHP tag and we call it wp_footer() , so this to add CSS style or JavaScript from function.php not just placed in header and footer we will see that later and in next lecture

We will start talking about the loop. Ok. So, until that see you and happy coding

Posted on

How to develop a Premium Themes for sell

Hello, welcome in my Website. My Name is Salah

So in this course. I’m going to teach you “How to develop a Premium Themes for sell”


so which you can sell it in Themes for sell or any other market place Which sell Digital Products

So, What we will study in this Course?
In this Course I’m not going to teach you CSS , HTML or Java Script But in this course I will focus only on the Back-end
I will take you to dive deep into PHP and WordPress function

So, in this course we will focus only “What is behind the see ! “
So, if you are looking to be a Developer / WordPress Developer /Back-end. Then, This course is for you.

So, To start This course you should first  have the Basic Knowledge of CSS, HTML, Java Script and PHP

So what tools you need to start this course For first of all. You need to set up  XAMPP on your local machine or if you are fine in any other program which can install your local server in your local machine. That’s fine Second, you need to go to WordPress.ORG/download/  and than download WordPress and install it in your server. So this is everything to get started And let’s Start from next lecture for” how to create your very own premium WordPress Themes ” So until that. See you 😉

Hello guys welcome in my website my name is Salah and welcome in first Tutorial for how to create first step for your own premium themes

Ok so now let’s start creating our own themes if we go to WordPress now installation you go appearance and you click themes ok, than you will find you normal themes which there and then let’s start to create our own

So you’ll go to the WordPress directory where is installation ok you will find 3 folders wp-admin, wp-content and wp-includes so, wp-includes its core files for WordPress

And wp-content is where is our themes and plugins is located
 so if you are a WordPress developer
 so you not need to change anything in wp-includes because every WordPress update
 it’s all over right on what you did change So you go wp-content and here you have this folders plugins and themes
so what we need for now in the themes
 so, we need to create our first themes so, we create new folder and call it as our new themes

In this case I will call it seoblog ok then you will need to open your code editor I use brackets you can use any editor you wish
here I will go inside the themes directory
 I get the directory and I will go to brackets and click new,  file, save as, I go to my themes directory and first file we will create is index.php and saved
We need to create other,  click file so we will add new and we will save as
 go to our directory and we will call it style.css then we clicked save so, now we have index and we have style so let’s go and see what happened in our WordPress


If we click the refresh , then we find our themes that appear seoblog so, let’s active it to see what’s happened the themes is activated
ok. so, in order to make picture to your themes you need to just add screenshot.png in your folder directory for example if we go to any other themes like twentynineteen we take the screenshot
here, we make it copy and go to our themes and we paste it. let’s refresh and the see what will happened
 ok. the picture is appear .so, what ever picture do you want to appear here, you design it and you simply name it screenshot.png
 and you place it in your themes directory
 ok. So, in order to right info about  our new themes we just place this code so this code it will be as a comment in style.CSS
 

First you write the themes name then the themes URL, you write the URL of your website or company or website you work in
 
Author : name ,,,and here Author link, you can place if you have your own website or CV online


description: you write here description you want

 version:  here you write version in this case it will be 1.0

 text-domain :you write the name of themes
 
licence URL : you write the licence information you want and in this case we are creating this theme forest
 tags: you write any tags you want, for example e-commerce, Custom and blog

 so what ever tags you want give it to your themes, you add it here and you click save


now our themes is ready here but it’s blank so when we activated we go to visit site it’s blank
 so, in order to see that everything is working well,
 
we go to our index ,file  and we create like any tag (h1)
than we say welcome, save it .let’s go to our website back, click refresh

Ok now everything working perfect
so there is other things I want to talk about <

you go to your WordPress installation and go to to wp-config, PHP you open it, and you go down define (‘wp-Debug’)
 here is false , you set it true,
 
so, why are we are making this true?
 we are making this true because this when any error coming in PHP in our themes ,

 than, it will appear in our website  so, you can Solve and see what is error appeared !

Because when it  false it not show the error but when it go to review  for themes forest

 then your themes will get rejected because they for sure they make it changed to true and they will see what is wrong in your themes

 So, in order to make sure that your themes it follow all guide line which provided by themes forest, we have a plugin we need to install this plugin is called “themes forest-check” go to plugin add new, and you search for “themes forest-check” and install now , activate

ok. Now the plugin is active Successfully


 so there is other plugin
 it very important to install,
 which call themes check ,
ok this two plugin we just install it showing you guideline and very recommend settings which accepted by themeforest,
 and accepted by WordPress.ORG.
 to make your themes pass there refuse
so, here if we go appearance click themes check
 we choose the themes we want,
 we click check it
 ok,  now all this is error

Here required required required required
all this error because we didn’t make anything yet

so , we will fix all this
so guys this was everything for now,  and in next lecture we will start write some coding so see you