Tutorials Archives - Maria Papandreou | Web Designer & Front-end Developer

Using ACF Fields in Divi When Shortcodes Don’t Work

marpand — Fri, 21 Feb 2025 12:42:35 +0000

If you’ve tried adding an ACF (Advanced Custom Fields) shortcode inside a Divi Text Module or Code Module, you may have noticed that it doesn’t always work. This is because Divi doesn’t natively execute ACF shortcodes the way it does with standard WordPress shortcodes.

Worry not! There’s an easy solution around that!
Instead of relying on Divi’s built-in functionality, we can create a custom shortcode that allows ACF fields to work inside Divi modules.

Let’s create a new shortcode called [acf_field].

Add this PHP code to your child theme’s functions.php file:

function get_acf_field_shortcode($atts) {
    $atts = shortcode_atts(array(
        'field' => '',
        'post_id' => get_the_ID()
    ), $atts);

    if (!empty($atts['field'])) {
        return get_field($atts['field'], $atts['post_id']);
    }

    return '';
}
add_shortcode('acf_field', 'get_acf_field_shortcode');

Use the Custom Shortcode in Divi

Now that your shortcode is ready, you can use it inside Divi modules to display the ACF field data you need. For example if your ACF name is price you can display it in a Divi Text Module using the following:

The price is: [acf_field field="price"]€

Just replace “price” with the actual ACF field name you want to display and you’re done!

This happens because Divi doesn’t always execute ACF shortcodes, but it does execute shortcodes registered in functions.php!
Try it out and let me know if you have any questions!

The post Using ACF Fields in Divi When Shortcodes Don’t Work appeared first on Maria Papandreou | Web Designer & Front-end Developer.

WordPress TAGS Shortcode

marpand — Wed, 21 Feb 2018 10:57:00 +0000

So I’ve been using DIVI theme (by Elegant Themes) for quite a while and I needed to find a way to add the post’s tags inside the post’s body. Since Divi doesn’t have this module I had to make my own shortcode. As we can see in the WordPress Codex the function that returns the tag list we want is get_the_tag_list().

Usage

This function does not display anything – if you want to put it straight onto the page, you should use echo get_the_tag_list();. Alternatively, you can assign it to a variable for further use by using $foo = get_the_tag_list();. The variables are all optional. You can use HTML inside each of the fields.

Parameters

$before (string) (optional) Leading text. Default: ‘ ‘ $sep (string) (optional) String to separate tags. Default: ‘ ‘ $after (string) (optional) Trailing text. Default: ‘ ‘ $id (integer) (optional) Post ID. Default: Current post ID

Create your own shortcode

Just add the following code in your theme’s functions.php file:

function wp_divi_tags() { return get_the_tag_list(‘
Tags: ‘,’, ‘,'
’); } add_shortcode(‘tags’, ‘wp_divi_tags’);

Then just use the SHORTCODE anywhere you want.

The post WordPress TAGS Shortcode appeared first on Maria Papandreou | Web Designer & Front-end Developer.

Facebook “Creating content with this name is not allowed. Try another name” SOLVED

marpand — Fri, 08 May 2015 08:01:09 +0000

Sometimes when trying to convert a Facebook Profile to a Page (either because you choose to or because Facebook makes you) you might get the following error message, when trying to name your Page: “Creating content with this name is not allowed. Try another name”

Some of you get this error even when leaving the same name. If you try to change the name in order for Facebook to accept it then moy may get the following error message: “Our automated system has detected that the name …. is not same or similar to your profile name ….. Please keep it same or similar and retry.”

A simple solution that usually works, is to capitalize all first letters of the name. For example if your profile name was “SIMPLE PROFILE NAME” then try changing it to “Simple Profile Name”.

GREEK VERSION

Σε πολλές περιπτώσεις κατά την διάρκεια μετατροπής του Facebook προφίλ σας σε Σελίδα Facebook (είτε από επιλογή σας, είτε επειδή σας αναγκάζει το Facebook) μπορεί να λάβετε το εξής μήνυμα σφάλματος: “Η δημιουργία περιεχομένου με αυτό το όνομα δεν επιτρέπεται. Δοκιμάστε ένα άλλο όνομα.“

Αν προσπαθήσετε να το αλλάξετε μπορεί στην συνέχεια να εμφανίσει το επόμενο σφάλμα “Το αυτοματοποιημένο σύστημά μας εντόπισε ότι η σελίδα “…” δεν είναι η ίδια ή παρόμοια με το όνομα προφίλ “…”. Διατηρήστε το ίδιο ή παρόμοιο όνομα και προσπαθήστε ξανά.“

Μια απλή λύση που συνήθως δουλεύει είναι το να μετατρέψετε τα πρώτα γράμματα των λέξεων του ονόματος σε κεφαλαία. Για παράδειγμα αν το όνομα του προφίλ σας ήταν “ΟΝΟΜΑ ΠΡΟΦΙΛ” δοκιμάστε να το κάνετε “Ονομα Προφιλ”. Προσοχή, αν αρχικά το όνομα ήταν γραμμένο με κεφαλαία γράμματα, τότε στην μετατροπή του ονόματος μην προσθέσετε τόνους γιατί δεν θα γίνει δεκτό και θα σας δώσει το δεύτερο μήνυμα σφάλματος.

The post Facebook “Creating content with this name is not allowed. Try another name” SOLVED appeared first on Maria Papandreou | Web Designer & Front-end Developer.

Responsive YouTube videos

marpand — Tue, 06 May 2014 08:52:05 +0000

Το YouTube αλλά και άλλες παρόμοιες ιστοσελίδες (Vimeo, Dailymotion κ.α.) δίνουν εύκολα την δυνατότητα ενσωμάτωσης των βίντεο τους σε άλλες ιστοσελίδες παρέχοντας ένα μικρό κομμάτι κώδικα στους ενδιαφερόμενους χρήστες, που έχει την παρακάτω μορφή:

Χρησιμοποιώντας αυτόν τον κώδικα όλα φαίνονται σωστά στην Desktop έκδοση μιας ιστοσελίδας. Τι γίνεται όμως με τα Responsive websites;

Για να προσαρμόζεται το μέγεθος του video θα πρέπει να ακολουθήσουμε μερικά ακόμη βήματα πριν δημοσιεύσουμε το άρθρο ή την σελίδα που περιλαμβάνει το βίντεο.

Που είναι ο κώδικας που χρειαζόμαστε στο YouTube

Πρώτος (πιο γρήγορος) τρόπος

Επισκεπτόμαστε την ιστοσελίδα Embed Responsively. Το συγκεκριμένο website δίνει έτοιμο τον κώδικα που θα χρειαστούμε. Το μόνο που πρέπει να κάνουμε είναι να εισάγουμε στο αντίστοιχο πεδίο είτε την διεύθυνση του βίντεο που θέλουμε είτε το embed κώδικα ανάλογα με το τι μας ζητάει. Υποστηρίζει το YouTube, Vimeo, Google Maps, Instagram, Vine κ.α.

Παράδειγμα κώδικα για responsive video YouTube από το Embed Responsively.

Δεύτερος τρόπος

Για τον δεύτερο τρόπο χρειάζεται να έχετε πρόσβαση στα αρχεία της ιστοσελίδας. Αν έχετε wordpress αυτό μπορεί να γίνει και μέσα από την επεξεργασία της εμφάνισης της ιστοσελίδας, στην διαχείριση.

Αρχικά βάλτε τον embed κώδικα που σας δίνει το YouTube στο νέο σας άρθρο ή σελίδα.

Στην συνέχεια θα πρέπει να βάλουμε τον παραπάνω κώδικα μέσα σε ένα

ώστε να μπορέσουμε εύκολα να το επεξεργαστούμε.

Τέλος προσθέτουμε τον παρακάτω κώδικα στο αρχείο CSS.

.video-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe {
   position:absolute;
   height:100%;
   width:100%;
   left:0;
   top:0;
}

Δείτε το παρακάτω παράδειγμα από το κινητό σας ή απλά μικρύνετε το παράθυρο του browser σας.

The post Responsive YouTube videos appeared first on Maria Papandreou | Web Designer & Front-end Developer.