Customizing Elementor’s default widgets

If you’re using Elementor for client work, probably you’ll hit some limits soon enough. Like, for example, you can’t customize buttons aspects on all widgets. Although is never documented, it is possible and I’ll show you a way of doing this. The example? Call to action widget (available only on Elementor Pro).

By default, you can only customize some basic stuff and if you want to reuse same style again, you’re kind of screwed.

This is a bit of nonsense, because Elementor already has a button component that you can use it outside of this widget! Why can’t I just use it here?

So, in order to make it work, we will need a couple of things. Elementor uses two ways of rendering content: one is JS based and is used only when you edit the page, the other one is PHP based and is used… everywhere else. Continuă să citești Customizing Elementor’s default widgets

Pre-popularea meniurilor în WordPress

De multe ori se întâmplă să fie nevoie să am meniurile gata pregătite în WP. Să fac un fel de seed la DB. Cum procedez?

În primul rând, facem un array cu elementele de meniu. Majoritatea sunt doar pagini, dar sunt situații în care vrem ceva mai… custom. De exemplu, vrem să adăugăm o anumită clasă pentru un element al meniului:

$menus = [
  'primary' => ['About', 'Stories', 'Community', 'Resources', 'Pet Supplies', 'Subscribe',
    [
      'menu-item-title' => 'Pet Portal',
      'menu-item-classes' => 'button button-hollow',
    ],

    [
      'menu-item-title' => 'Donate',
      'menu-item-classes' => 'button',
    ],
  ],
  'secondary1' => ['Adoption', 'Pet Care', 'Training', 'Youth Programs'],
  'secondary2' => ['Give', 'Take Action', 'Outreach', 'Sponsor'],
  'footer' => ['Contact', 'Careers', 'Articles', 'Events', 'Results'],
];

Cheile array-ului coincid cu meniurile înregistrate deja (să zicem în functions.php): Continuă să citești Pre-popularea meniurilor în WordPress

Principii SOLID în practică

Am fost întrebat mai deunăzi dacă pot îmbunătăți codul de mai jos:

class Tooltip
{
  protected $dataIsProcessed = false;

  public function __construct(array $data) {
    $this->data = $data;  
  }

  protected function processData() {
    if($this->dataIsProcessed) {
      return;
    }

    $this->dataIsProcessed = true;

    $this->data = array_merge([
      'title' => '',
      'body' => '',
      'meta' => ''
    ], $this->data);

    $this->data['body'] = stripslashes($this->data['body']);
    $this->data['title'] = do_some_stuff_with_the_title($this->data['title']);
    $this->data['meta'] = do_some_other_stuff_with_meta($this->data['meta']);
  }

  protected function getAttribute($attribute) {
    $this->processData();
    return $this->data[$attribute] ?? '';
  }

  public function style1() {
    return sprintf('<h2>%s</h2>',
      $this->getAttribute('title')
    );
  }

  public function style2() {
    printf('<h2>%s</h2><p>%s</p>',
      $this->getAttribute('body')
    );
  }

  public function style3() {
    return sprintf('<p>%s</p><div>%s</div>',
      $this->getAttribute('body'),
      $this->getAttribute('meta')
    );
  }
}


$tooltip = new Tooltip([
  'title' => 'Hello World!',
  'body' => 'Nice to meet you.',
  'meta' => 'Last update: last year'
])

echo $tooltip->style1();
echo $tooltip->style2();
echo $tooltip->style3();

Continuă să citești Principii SOLID în practică

WordPress: Încărcarea dinamică a articolelor cu un anumit term

Zilele trecute am avut următoarea situație:

  • În backend: o taxonomie custom cu câteva zeci de terms
  • În frontend: afișez ultimele zece articole dintr-un term + buton de încărcare a următorului term.

Prima idee a fost: încarc toate articolele dintr-un foc și fac toggle la vizibilitate cu JS. Dar se ajunge lejer la câteva sute de articole, lucru ce afectează performanța din toate punctele de vedere. Continuă să citești WordPress: Încărcarea dinamică a articolelor cu un anumit term

Coding tips: Interfețe

Un concept cu care am avut ceva de furcă la început a fost folosirea interfețelor. Peste tot găseam o explicație vag sumară, eventual și ceva legat de un contract și rămâneam cel puțin la fel de confuz ca înainte.

Din punctul meu de vedere, dacă nu plănuiești să ai un cod extensibil (e.g. prin plugin-uri), interfețele sunt overkill. Nu strică, dar nici nu aduc valoare.

Conceptele SOLID sunt another can of worms, despre care probabil voi scrie cu altă ocazie.

Pentru a înțelege scopul interfețelor, este util să înțelegi conceptele SOLID, în special open-closed principle, care zice că un obiect ar trebui să permită extinderea, nu modificarea. Continuă să citești Coding tips: Interfețe

De la Windows la Ubuntu si inapoi

De când mă știu a sta în fața unui computer am folosit Windows. Când am decis că vreau să devin programator am făcut trecerea către sisteme Linux. Mi-aș fi dorit un Mac pe vremea aceea dar cum nu îmi permiteam așa ceva am ales soluția cea mai apropriată. Se auzeau zvonuri despre Windows 9 când am început să folosesc ElementaryOs.

Mă așteptam să trec printr-o perioadă mai lungă de acomodare. Aveam impresia că voi fi nevoit să folosesc terminalul și că îmi va fi greu, că îmi va lipsi interfața grafică a Windows-ului. Dar am descoperit repede că terminanul nu înlocuiește componenta grafică a sistemului de operare ci o completează.

Pe atunci foloseam dual boot, lucram des cu Adobe Illustrator și After Effects și nu mă descurcam cu alternativele oferite pe Linux. Programele oferite de Adobe erau singurele care mă țineau captiv în lumea Windows.

Dar am început să lucrez cu RaspberryPi așa că am făcut alegerea logică de a folosi mai des Ubuntu și nu am fost dezamăgit deloc de alegere:

  • arată și se mișcă bine, consumă puține resurse;
  • ușor de costumizat și multe skin-uri disponibile;
  • terminal-ul este foarte util, competent și oferă un workflow mult mai bun pentru dezvoltare;
  • Inkscape ca alternativă bună pentru Illustrator;
  • Blender ca alternativă bună pentru After Effects;
  • flexibilitatea sistemului de operare mi-a permis dezvoltarea unor periferice proprii;
  • este gratuit!;

Nu îmi lipsea nimic din mediul Windows. Am înlocuit și suita Adobe cu programe open-source iar de gaming nu se pune problema (nu sunt gamer, dar la nevoie aveam Minecraft și Steam).

Toate beneficiile și costuri 0. Așa am renunțat la Windows și pentru calculatorul de acasă și pentru cel de la muncă.

Doar că mi-am schimbat jobul, și am primit un laptop cu Windows 10. Ce să zic? „Bine te-am găsit, ce știi să faci?”. Observ că îmi lipsește UX-ul din Ubuntu, Windows face niște chestii ciudate:

  • alege să iși facă update în cele mai proaste momente;
  • nimic nu se aproprie de terminal-ul linux (cmd este doar o fosilă, power shell e ciudat). Alternativele sunt mai bune ,Git Bash de exemplu, dar nici ele nu vin cu o experiență bună out of the box, tot trebuiesc configurate;
  • uneori ferestre noi apar cu bara de titlu (partea cu – [] x) în afara suprafeței de lucru. Nu am cum să mut fereastra așa că trag de unul din colțurile de jos ca ele să pice bine în desktop;
  • dacă m-am deconectat de la un monitor extern multe ferestre se deschid în acel spațiu ce acum îmi este inaccesibil. Chiar dacă resetez modul de proiectie (win+p) sau dau restart, ele tot acolo se deschid;
  • pentru Netflix folosesc un monitor extern cu niste boxe atașate de acesta. Cu Windows se întampla de multe ori să nu am sunet prin hdmi, trebuie sa urmez un ritual anume cu scos-bagat mufa de hdmi și schimbat sursa audio-out până funcționează;
  • nu am explorat prea mult, dar pare că windows nu este atât de personalizabil;
  • au revenit probleme precum: viruși și instalarea unui antivirus, vulnerabilități , privacy, BSOD, „google chrome has stopped working”;
  • pentru unele aplicații textul este randat ciudat din cauza problemor cu dpi;
  • sunt obișnuit să pornesc IDE direct în folder din linia de comandă. Pe Windows comanda pentru subline subl . deschide mai multe sesiuni de sublime … (later edit: am aflat din comentarii că acesta defapt este un feature);

Singurele motive pentru care Windows merită folosit: suita Office și programele VPN. Noroc că există VirtualBox cu guest additions!

Compilează Libvirt pentru Python pe Ubuntu

Să instalezi Libvirt pe Ubuntu pentru Python e simplu:

sudo apt install -y python python-pip libvirt-dev
pip install libvirt-python

Cu instalarea default, ar putea să-ți lipsească unele bindings ale API-ului Libvirt expuse pachetului Python, deși ai ultima versiune.  Dacă vreodată ai nevoie să compilezi librăria, uite cum poți (setup-ul meu a fost Libvirt 4.0.0 pe Ubuntu 16.04 cu Python 2.7):

#!/usr/bin/env bash

WORK_DIR="/tmp/libvirt"

sudo apt update
sudo apt install -y git

# LIBVIRT

WORK_DIR_LIBVIRT="$WORK_DIR/libvirt"
mkdir -p $WORK_DIR_LIBVIRT
cd $WORK_DIR_LIBVIRT

LIBVIRT_VERSION="v4.0.0"
git clone -b $LIBVIRT_VERSION --single-branch --depth 1 https://github.com/libvirt/libvirt.git .
git checkout $LIBVIRT_VERSION

sudo apt install -y \
  gettext \
  libtool \
  autoconf \
  autopoint \
  pkg-config \
  xsltproc \
  libxml2-utils
./bootstrap

sudo apt install -y \
  libnl-3-dev \
  libnl-route-3-dev \
  libxml2-dev \
  libdevmapper-dev \
  libpciaccess-dev \
  python
./configure

sudo apt install -y intltool
aclocal

make
sudo make install

# LIBVIRT PYTHON

WORK_DIR_LIBVIRT_PYTHON="$WORK_DIR/python"
mkdir -p $WORK_DIR_LIBVIRT_PYTHON
cd $WORK_DIR_LIBVIRT_PYTHON

LIBVIRT_PYTHON_VERSION="v4.0.0"
git clone -b $LIBVIRT_PYTHON_VERSION --single-branch --depth 1 https://github.com/libvirt/libvirt-python .
git checkout $LIBVIRT_PYTHON_VERSION

sudo apt install -y python-dev

python setup.py build
python setup.py install

# CLEANUP

rm -r $WORK_DIR
sudo apt purge -y \
  gettext \
  libtool \
  autoconf \
  autopoint \
  pkg-config \
  xsltproc \
  libxml2-utils \
  libnl-3-dev \
  libnl-route-3-dev \
  libxml2-dev \
  libdevmapper-dev \
  libpciaccess-dev \
  intltool \
  python-dev

Cele de mai sus pot varia în funcție de configurația ta de Ubuntu. Doar fii atent la erorile privind tool-urile care lipsesc.

Acum poți verifica simbolurile de care aveai nevoie:

sudo apt install -y binutils
nm -g /usr/local/lib/libvirt.so

Recomand ca tentativele de compilare să fie într-un mediu izolat.

Selectarea categoriilor cu ajutorul Carbon Fields

Despre Carbon Fields am scris atât pe blogul personal, cât și pe forum și am tot început să-l folosesc la diverse proiecte, având tot felul de provocări, care mai de care mai interesantă. Ultima? Să pot permite selectarea unei singure categorii pentru un anumit post. Soluția e foarte simplă și are câțiva pași simpli. Evident, în loc de category se poate folosi și o taxonomie proprie.

<?php

use \Carbon_Fields\Container;
use \Carbon_Fields\Field;

add_action('after_setup_theme', function () {
  // inițializăm Carbon Fields
  \Carbon_Fields\Carbon_Fields::boot();
});

function getCurrentValue()
{
  if (!is_admin()) {
    // pentru că toate câmpurile sunt parsate și în frontend, nu facem interogările decât în admin
    return [];
  }

  $currentPostID = absint($_GET['post'] ?? 0);

  $mediumTerm = wp_list_pluck((array) get_the_terms($currentPostID, 'category'), 'term_id');
  
  // în cazul în care postul are deja mai multe categorii setate, o întoarcem doar pe prima
  return array_shift($mediumTerm);
}

function getAvailableOptions()
{
  if (!is_admin()) {
    return [];
  }
  $terms = get_terms([
    'taxonomy' => 'category',
    'hide_empty' => false,
  ]);

  $parsedTerms[-1] = __('Select');

  foreach ($terms as $term) {
    // generăm un array de forma "id" => "Nume", pentru a-l putea afișa în select 
    $parsedTerms[$term->term_id] = $term->name;
  }

  return $parsedTerms;
}

add_action('carbon_fields_register_fields', function () {
  Container::make('post_meta', __('My Category'))
    ->where('post_type', '=', 'post')
    ->add_fields([
      Field::make('select', 'my_category', __('Category'))
        ->add_options(getAvailableOptions())
        ->set_required(true),
    ]);
});


add_action('carbon_fields_post_meta_container_saved', function ($postID) {
  $term = absint(carbon_get_the_post_meta('my_category'));
 

  if (!empty($term)) {
    wp_set_post_terms($postID, [$term], 'category', false);
    // https://developer.wordpress.org/reference/functions/wp_set_post_terms/
    // salvăm toată povestea
    // al patrulea argument, `false` poate fi setat ca `true` dacă se dorește 
    // adăugarea mai multor categorii
  }
});


add_filter('register_taxonomy_args', function ($args, $taxonomy) {
  if ($taxonomy === 'category') {
    // ascundem selectorul de categorie
    $args['meta_box_cb'] = false;
  }
  return $args;
}, 10, 3);

Cum configurezi eficient Windows pentru PHP Dev?

Mi se întâmplă deseori să constat lipsa –  pe sistemele unor programatori – a unor  utilitarele mici, inspirate sau portate din lumea Linux. Prin urmare, m-am gândit să încerc să fac un mic ghid despre ce și cum ar trebui instalat.

Plec de la premisa că este și NodeJS instalat iar XAMPP este Stack-ul folosit, dar se poate aplica în orice alt context; scopul este acela de a avea toate utilitarele disponibile în cmd (hint: încearcă cmder)

1. Rapid Environment Editor

Complet opțional, dar foarte la îndemână, util în editarea/adăugarea variabilelor. Sigur, te poți descurca și prin alte metode, dar REE este atât de eficient încât nici nu merită să iau în considerare alte explicații 😀

2. Gow

Este o colecție de utilitare, de genul whereis, wget, curl, grep, tar șamd. În total sunt peste o sută de astfel de programe.

3. GnuWin

Similar cu Gow, dar ultima actualizare a fost în 2009. Eu le am pe amândouă doar pentru că pe ăsta l-am găsit primul și mi-a fost prea lene să le compar 😀

4. Git

Instalat astfel încât Git va fi disponibil direct din cmd. Adică la instalare alegi ultima opțiune:


După ce instalăm tot ce am listat mai sus, deschidem REE și avem grijă ca în PATH să existe directoarele unde au fost instalate utilitarele astea:

Săgețile albastre sunt legate de contul curent din Windows și poate fi aflat prin apăsarea Win+R -> %appData%\npm respectiv %appData\Composer.

Pe lângă utilitarele înșirate mai sus, recomand să adaugi și directoarele bin  de la Apache sau Mysql, respectiv directorul în care se află executabilul php.exe (e.g. c:\xampp\php)

După ce ai adăugat toate variabilele astea în editor, salvezi și dai un restart (unii zic că logout ar fi suficient). Imediat după, dacă deschizi cmd vei avea la dispoziție o mulțime de utilitare, care mai de care mai… utile.

Folosești Composer în tema ta WordPress? Evită erorile la instalare!

De fiecare dată când folosesc Composer într-o temă sau într-un plugin încerc să am grijă de momentul în care trebuie să pornesc de la zero cu respectiva temă (sau plugin).

Cum folderul vendor este ignorat de Git, sunt șanse destul de mari ca tot codul meu să rezulte într-un minunat ecran alb (dacă erorile sunt oprite).

Codul de mai jos încearcă să prevină problema asta, verificând existența autoload.php.

function themeReqirementsWarning_ihdqnrwrbd()
{
	$message = __("Some files are missing from the dependencies list. Please make sure you've ran <code>composer update</code>!", 'felder');
	printf('<div class="error"><p>%s</p></div>', $message);
}

if (!file_exists(get_template_directory() . '/vendor/autoload.php')) {
	add_action('admin_notices', 'themeReqirementsWarning_ihdqnrwrbd');

	add_action('after_switch_theme', function () {
		switch_theme(WP_DEFAULT_THEME, WP_DEFAULT_THEME);
		unset($_GET['activated']);
		add_action('admin_notices', 'themeReqirementsWarning_ihdqnrwrbd');
	});
	return;
}

require_once dirname(__FILE__) . "/vendor/autoload.php";