Select Page
How to limit characters in widget titles

How to limit characters in widget titles

From some time i’ve been wondering how to make the wiget titles shorter.

The thing that bummed me out was that the widget “recent posts” was inside a core file from wordpress. The problem with this is the fact that if you change wordpress core files, at the next update, the file would get rewritten. And is a bad practice anyway… So after some long research on how to get this done, i’ve decided to take a break, as i couldn’d find a solution that woked. At a later time and with a fresh mind i took another aproach on this.

I tought that it must be some plugin that i can use in order to have a new widget with the same functions that the core file has, and to write that down. I found Custom Recent Post Widget can do this for me and i was so happy. Now all i had to do was to find the files that i needed to edit and to write some code over there… and that was it.

Here is how i did just that

1. Install and activate Custom Recent Post Widget
2. With your FTP client search inside the plugin folder search for includes > crpw-cat.php and open this file
3. Now you shoud find the class crpw-item, and inside that search for the “a hreh=” tag (about line 52) like below

1
<a  href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>" class="crpw-title"><?php the_title(); ?>

4. And replace the code above with this one

1
2
3
4
5
<a  href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>" class="crpw-title"><?php  if ( get_the_title() ) {
                    $t = get_the_title();
                }
        echo mb_strimwidth(get_the_title(), 0, 50, '...');
                ?></a>

What i’ve done was to replace the “the_title” with “get_the_title” and added the “echo” to it and stated that i want the title to be displayed with a maximum of 50 charaters. You can replace the value “50” whith whatever value you want.

If this worked for you leave a comment, share or save this article for a later use.

How to change WordPress directory name

How to change WordPress directory name

WordPress has alot of flexibility when it comes to moving it’s core file and folder structure, or  like in our case, to change the Wordpress directory name. For example, you may have a wordpress installation like domain.com/myblog and you want to change that to domain.com/mynewblog. There are a few options out there, but I will show you two solutions on how to achive this. 

The most important thing before anything: Backup First! 

Solution #1 – A fast way to do it (but not so safe in my opinion)

If you are a developer and you operate on non-live enviroment like localhost or a test server, then this is a solution for you.  If you’re not comfortable with this, go ahead and look for my other solution.  

  1. Open your FTP software (I use FilleZilla), navigate to your installation folder /myblog and change the folder name /mynewblog. 
  2. Open and browse for the tool named “Search and replace” and get your download from this non-affiliate link 
  3. Now extract the php file whitin the zip file you recived and as a precaution, rename the file with something unique (geodajk.php for example). Upload this file to your folder (the one you just renamed). 
  4. Open the browser and enter the URL of the file uploaded in step 3. It should look similar to this: “https://domain.com/mynewblog/geodajk.php”.  
  5. Once the page loads, click “Submit” and enter your database details in the text fields. On the next page, insert the old URL in the “search for” text field and the new URL in the “Replace with” text field. To continue, click the “Submit Seach String” button. 
  6. Once this is done, go to your FTP program and delete the Search and Replace tool you’ve uploaded in the first place. 

Solution #2 – Cloning your wordpress installation 

If you don’t want to get messy with my previows solution, here is something that you can use to achive the same result (is not that complex as it looks).  

  1. Login to your website, go to Plugins>Add new and search for “WP Clone by WP Academy”. Install, activate the plugin and navigate to Dashboard> WP Clone 
  2. Click “Create Backup” and wait for the process to complete. After the process is complete, click “Copy URL” and save it for later use.  
  3. Open your FTP software (I use FileZilla) and search for your root folder. Over there create a new folder with the desired name like /mynewblog and install wordpress as you normaly do. If you are a cPnel or Plesk user, use that to make a new worpress install (I will not get into that in this article). 
  4. In your new wordpress installation add the WP Cone plugin like we did in step 1 
  5. Now that you have installed the plugin, go to WP Clone, select “Restore from URL”, enter the URL saved in step 2 and click “Restore Backup” 
  6. After the process is complete, you might need to instal a new plugin called “Better Search and Replace”. In “Search for” paste the old link domain.com/myblog/ and in “Replace with” enter the new path like domain.com/mynewblog/. Select all databases and If you’d like to skip de “dry” replacement, uncheck the last checkbox and click “Run Search/Replace” 
  7. Now you can delete the old folder installation with FTP. Be aware not to uninstall and delete the old database as it is used for the new installation. 
  8. Now you’re good to go! 
How to fix “Divi Builder Timeout” Error

How to fix “Divi Builder Timeout” Error

In this article i’m going to show you how to fix the divi builder timeout error with a simple line of code. By adding a mod_substitute directive to your .htaccess, you encrease the processing memory for the Divi Builder. Before you start, keep in mind that you should backup your file, before you make any changes.

Go ahead and locate your .htaccess file, open it, and insert the following code at the top of the document.

1
2
3
4
5
# BEGIN FIX divi builder timeout error
<IfModule mod_substitute.c>
SubstituteMaxLineLength 10M
</IfModule>
# END FIX divi builder timeout error

You can read more about mod_substitute directive in apache’s documentation.

Quick fix when Divi row section or module “disable on mobile” is not working

Quick fix when Divi row section or module “disable on mobile” is not working

At some point I was working on a website for a client and wanted to hide a row, section or module, to be viewed only on specific device type. It was very, very frustrating to see that even if checked the box it wasn’t working as intended.

I’ve search the internet for a solution but i’ve found that no one had this issue (or no one posted on this subject).

But actualy there is a solution that can resolve the issue with just adding a little bit of custom CSS to the child theme. The code works with Divi or any other theme that you might use for your website.

If you use a Divi child theme as I do, go to your Custom CSS. It’s located under Dashboard>Divi>Theme Options>Custom CSS

Go ahead and add the following code to Custom CSS

1
2
3
4
5
6
7
8
@media screen and (max-width: 599px)
{
.mobileoff {display: none;}
}
@media screen and (min-width: 600px)
{
.desktopoff {display: none;}
}

Now go to the row section or module and add to the CSS class field settings the specific class that you need. For example use mobileoff  if you’d like to hide a module on devices smaller then 599px or desktopoff if you’d like de hide a modul on devices larger then 600px.

Remember that you can rename the css class with whatever you want/ and you can change the max/min width to fit your needs.

How to add Facebook Comments to WordPress without a plugin

How to add Facebook Comments to WordPress without a plugin

Instaling Facebook Comments to replace your standard wordpress comment system can drive more engagement and shareability to your blog articles.

I will explain below, how to add Facebook Comments to WordPress without a plugin, in 3 easy steps.

Here are some reasons why you might want to do that:

  1. Less additional code – With more and more plugins on your wordpress instalation you are adding more unnecessary code that may slow down your website. Less plugins you have the better, especially if you already have lots of plugins installed.
  2. It is more secure – Every time you add a plugin, you might open up to malware injections and hackers will exploit every security hole, espepcialy if the plugin is not up-to-date, and this can cause alot of problems for you. If you don’t trust the author, do not install that plugin. Research first if the plugin is trusted by others, of it has a good support community etc. NOT ALL PLUGINS ARE CERATED EQUAL.
  3. Fast and easy installation – The thing is that manualy setting up facebook comments is easier then you think and all it takes is a couple on minutes. See the proccess below.

 

STEP 1: The Setup of Facebook Comments

Go ahead to the official Facebook Comment developer page and setup your own settings. Type the path to your blog page ex: https://mywebsite.com/blog, insert the desired width (% – for responsive full width, px – for specific width), number of desired post, and hit “Get Code” to generate the code.

Your code will look like this

1
2
3
4
5
6
7
8
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Inside your WordPress Dashbord go to Appearance> Editor and look for the file header.php and right below the < body > tag, insert the generated facebook code.

For Divi and Extra Theme users: Go to Divi>Theme Options> look for the Integrations tab, Enable Body Code if you didn’t do that already and insert the code on the right of “Add code to the < body >”.

You can also achive this with FTP if you know your way around.

Note! – You should use a child theme.

STEP 2: Installing the Facebook Comment Code

Place the code below (or the oneyou got generated from facebook) where you want the comments to appear (usualy at the end of your posts). This code utilizes dynamic functions to make Facebook Comments unique for each page. You should look for single.php file to edit inside your theme/child theme folder.

1
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="5" data-mobile="Auto-detect" data-colorscheme="light" data-order-by="time"></div>

Here is an example where i’ve put the code for this blog

How to addFacebook Comments to WordPress without a plugin

To see the full list of display options and tags, visit the Facebook Comments settings.

STEP 3: Testing your setup

So you’ve got to this part of the tutorial. You’ve placed the two code in the right places, and now is time to check if your implementation works. Now you can visit a few of your blog posts to verify if everything is functioning and shows properly.

That is it!

Feel free to leave a comment and share with your friends.