Beans - Open Source WordPress Framework und Leichtgewicht

Beans ist ein Open Source WordPress Framework mit besonderen Fähigkeiten und von Grund auf, auf Geschwindigkeit ausgelegt. Dank fertigen Child Themes kann das WordPress-Theme aber auch von Endbenutzern ohne Programmierkenntnissen genutzt werden. Erfahre hier, was Beans auszeichnet.

Bisher nutze ich hauptsächlich vollgestopfte Themes wie Enfold und Divi. Ich komme aber immer mehr zu dem Schluss, dass die Geschwindigkeit, neben dem Inhalt, mit das wichtigste Argument für eine gute Webseite ist. Ich nutze auf meinen Seiten lediglich einen sehr kleinen Teil der Features, von diesen mächtigen Multipurpose Themes. Zwischenzeitlich habe ich mir die Minimal Themes von David angesehen. So richtig überzeugen konnte die mich aber auch nicht.

Für meine zukünftigen WordPress-Themes werde ich also das relativ neue Framework Beans einsetzten.

Was ist Beans?

Beans wird von Thierry Muller unter der GPL Lizenz entwickelt und bereitgestellt. Das Projekt gehört jetzt aber der Community und Thierry ist lediglich der Hauptbeitragende und kümmert sich gleichzeitig um die gleichbleibenden Qualitätsstandards.

Since it is completely open source project, it doesn’t belong to me anymore but to the community.

Ziel ist es, aus Beans das beste Framework für WordPress zu machen. Um Geld geht es zunächst mal gar nicht.
Aufgrund der mächtigen API (Programmierschnittstelle), sieht der Entwickler aber auch Premium-Anbieter mit Child Themes und Plugins kommen.

Nach zwei Jahren Arbeit ging die erste Version am 26. August 2015 online. Die offizielle Webseite ist unter getbeans.io erreichbar. Wenn du zum Projekt beitragen möchtest, kannst du dich auf GitHub – github.com/Getbeans/Beans beteiligen.

PHP, HTML5 und CSS3 nutzen alle aktuellen Website Templates. Beans vereint aber auch die Vorteile von LESS, UIkit und einer eigenen API.

Damit geht nicht nur die Entwicklung viel schneller von der Hand, sondern auch das Endergebnis bleibt schlank und schnell. Genau das was ich mir von einem guten Framework erwarte.

Müsste ich das Framework mit wenigen Worten beschreiben, würde ich folgende Auflistung wählen:

• sauber programmiert
• schnell
• sehr schlank
• responsive (natürlich)
• überragende API

Beans bringt alles mit, um sehr schnell und auf elegante Weise, eigene Designs umzusetzen. Dank der vorgefertigten Strukturen, kann auf viele Plugins verzichtet werden, da das Framework schon alle notwendigen Funktionen mitbringt.

Außerdem schaut das Theme auf allen Geräten gut aus. Egal ob die Seite auf dem Rechner, dem Tablet oder einem Smartphone geöffnet wird.

Die Beans API

Das Herzstück des Beans WordPress Frameworks ist die eigene API, welche die WordPress API erweitert und auch ganz neue Funktionen hinzufügt.

Die API besteht aus 14 API Komponenten, die auch wirklich nur geladen werden, wenn deren Aufgaben benötigt werden. Teilweise ist eine Komponente von einer anderen abhängig. Die Abhängigkeiten werden selbstständig aufgelöst und geladen.

Alle Components hier aufzuzählen und zu erklären würde den Rahmen dieses Artikels sprengen. Zum besseren Verständnis des Frameworks möchte ich aber wenige Components genauer behandeln.

Als Schaltzentrale für die API-Funktionen dient die functions.php deines Child Themes.

Beans HTML API

Besonders interessant ist die HTML Komponente, mit der Markups und Attribute verändert und hinzugefügt werden können.
In herkömmlichen Themes müssen immer komplette Templates und Dateien überschrieben werden. Beans lehrt uns, dass es auch einfacher und eleganter geht.

Alle HTML Tags und Attribute können in Beans mittels einer einzigartigen ID identifiziert und angesprochen werden. Im Development Mode wird diese data-markup-id für jedes HTML Element angezeigt. Zu sehen im Screenshot weiter oben.

Code sagt mehr als tausend Worte. Deshalb beginnen wir gleich mit einem einfachen Beispiel:

echo beans_open_markup( 'theme_main', 'main', array( 'class' => 'tm-main', 'role' => 'main' ) );

    echo '<!-- Mein HTML -->';

echo beans_close_markup( 'theme_main', 'main' );

Das Ergebnis schaut dann so aus:

<main class="tm-main" role="main" data-markup-id="theme_main">

    echo '<!-- Mein HTML -->';

</main>

Mittels Hook könnte ich diesen Main-Bereich überall im Theme platzieren. Ganz ohne das Verändern eines Template Files.

Das main Element kann mit dieser Zeile durch section ersetzt werden:

beans_modify_markup( 'theme_main', 'section' );

Dank Conditional Tags können die HTML Änderungen nur in bestimmten Bereichen deines Themes ausgeführt werden.

Für weitreichende Änderungen einer Template-Datei kann es aber trotzdem einfacher sein, direkt die komplette Datei zu überschreiben.

Beans Actions API

Hier werden die WordPress Actions erweitert. Jede mit Beans erstellte Action bekommt wieder eine ID zugeordnet. Im kommenden Beispiel ist „my_page_title“ diese eindeutige Identifikation.

beans_add_action( 'my_page_title', 'action_hook', 'add_page_title' );

function add_page_title() {

    echo '<h1>Überschrift</h1>';
    
}

Mit beans_modify_action() und mehreren Alias-Funktionen, beans_replace_action(), beans_reset_action() und beans_remove_action() können diese Aktionen gezielt verändert werden.

beans_modify_action_callback( 'my_page_title', 'modify_page_title' );

function modify_page_title() {

    echo '<p>Neue Überschrift</p>';
    
}

Oder den Title einfach entfernen:

beans_remove_action( 'my_page_title' );

Beans Compiler API

Endgültig von Beans überzeugt hat mich der Compiler. Diese Programmierschnittstelle kombiniert externe und interne CSS, LESS und JavaScript Dateien auf Seitenbasis. LESS Dateien werden automatisch in CSS umgewandelt.

Diese kompilierten Dateien werden gecached und in einem gemeinsamen Verzeichnis (/wp-content/uploads/beans/compiler/) gespeichert.
Der Cache kann jederzeit, in den Einstellungen, über den Button Assets Cache leeren, geleert werden. Die Neuerstellung erfolgt on-the-fly, beim ersten Aufruf dieser Seite.

Solange du im Development Mode bist, registriert der Compiler auch alle Änderungen und generiert einzelne Cache-Files neu.

Der Compiler sorgt dafür, dass wirklich nur benötigte CSS und JS Komponenten geladen werden müssen, und das für jede einzelne Seite.

Zusätzliche Styles und Skripte können beliebig geladen werden:

add_action( 'wp_enqueue_scripts', 'my_function_name' );

function my_function_name() {

    beans_compile_css_fragments( 'css_compiler_id', array( 'file_path', 'file_path' ) );
    beans_compile_less_fragments( 'less_compiler_id', array( 'file_path', 'file_path' ) );
    beans_compile_js_fragments( 'js_compiler_id', array( 'file_path', 'file_path' ) );

}

Sehr geil, oder?

UIkit Integration und API

Einen ganz besonderen Part nimmt die UIkit Integration ein. UIkit ist ein freies CSS und JS Framework, welches alle nur erdenklichen optischen und technischen Spielereien mitbringt. Buttons, Dropdowns, Menüs, aber auch eine Lightbox und eine Sticky Funktion kommen mit dem Paket unter der MIT License.

Grundsätzlich ist UIkit in Core und Add-on Komponenten unterteilt.

Da wir unsere Seite so schlank wie möglich halten möchten, laden wir nur die benötigten Komponenten. Entweder global in den functions.php, oder auf Seiten-Basis in Page-Template.

add_action( 'beans_uikit_enqueue_scripts', 'my_function_name' );

function my_function_name() {

    beans_uikit_enqueue_components( array( 'flex, overlay' ) );
    beans_uikit_enqueue_components( array( 'tooltip' ), 'add-ons' );
    
}

Die zweite enqueue-Zeile zeigt wie ein Add-on geladen wird. Mit der Funktion beans_uikit_dequeue_components() können Komponenten auch wieder entfernt werden.

Beans stützt sich damit auf eine sehr umfangreiche und stabile Style- und JavaScript-Basis. UIkit hat seit dem Start im Juli 2013 viele Anhänger und Mitstreiter gewonnen.
Das gesamte Projekt ist bestens dokumentiert und bietet Community Support.

Child Themes für den perfekten Start

Beans stützt sich auf das Parent Theme – Child Theme Konzept. Das Elterntheme muss installiert werden und steuert damit das Framework bei. Der Inhalt von /wp-content/themes/tm-beans bleibt stets unberührt. So kann die Basis unseren neuen Themes jederzeit upgedatet werden.

Das Child Theme stellt zunächst eine leere Struktur dar, worin nach und nach all unsere Änderungen eingepflegt werden.
Für den einfachen Start stellt das Projekt ein sogenanntes Beans Starter Child Theme zum Download bereit. Damit kannst du sofort loslegen.
Die Struktur dieses Kind-Themes ist denkbar einfach:
functions.php
screenshot.png
style.css
style.less

Lediglich vier Dateien sind enthalten.

In der functions.php passieren die gröberen Änderungen. Genau hier kommt die ausgeklügelte Beans API an den Start.

Die Datei style.css ist für jedes WordPress-Theme absolut notwendig. Darin stehen die grundsätzlichen Informationen, wie Theme-Name oder Autor. Du kannst diese Datei auch für deine Styles nutzen, falls dir LESS nicht zusagt.

Bevorzugt sollte allerdings die style.less Datei für alle CSS-Änderungen verwendet werden. Hier können Variablen und Styles ressourcenschonend überschrieben, anstatt wie in der style.css hinzugefügt werden. Solltest du mit LESS noch nicht vertraut sein, solltest du dir die Zeit dafür nehmen. Es lohnt sich! Besonders da es lediglich ein Aufsatz für CSS ist und deshalb die Lernkurve sehr flach ist.

Uns so sieht Beans nackt und unverändert aus:

Es gibt aber auch weitere Child Themes, mit denen du beginnen kannst.

WordPress Customizer

Für Theme-Änderungen ohne Programmierkenntnisse hat WordPress den Customizer eingeführt. Eine einheitliche Schnittstelle, wo alle Themeentwickler ihre Einstellungen einbauen können.

Auf der linken Seite findet sich das Menü mit allen Einstellungsmöglichkeiten. Auf der Rechten werden sofort die Änderungen angezeigt.

Das Framework, bringt alle Funktionen mit, um den Customizer zu erweitern, hat im Auslieferungszustand aber selbst nur wenige Änderungen daran vorgenommen.

Zu erwähnen ist aber die Einstellung für das Default Layout. Diese Einstellung bestimmt, ob Sidebars genutzt werden sollen, wieviele davon und an welchen Positionen. Du hast sechs Auswahlmöglichkeiten.

Das Seitenlayout kann aber noch einzeln für jede Seite und für jeden Post angepasst werden.

Vollständige Dokumentation und Sippets

Ein Framework ohne Dokumentation macht nicht viel Sinn. Thierry hat hier volle Arbeit geleistet. Die Dokumentation ist umfangreich und bietet zusätzlich noch die Bereiche Code Snippets und Code Reference.

Für den Anfang empfiehlt es, sich zumindest die ersten Abschnitte der Doku zu lesen. Das hilft sehr, die erste Hürde zu nehmen und zu verstehen, wie Beans arbeitet.
Die übergreifende Suchfunktion bringt dich schnell ans Ziel, wenn du mal nicht weiter kommst.

Für Fragen und Anregungen steht das Forum, auf Basis von bbPress, parat. Mittlerweile hat sich eine wachsende Community eingefunden, welche Fragen zügig beantwortet.

Neue Ideen und Verbesserungen aus dem Forum werden auch nachhaltig in den Core übernommen.

Geschwindigkeit

Neben der API und dem Compiler war die Ladezeit das ausschlaggebende Argument für mich.

Für den Test habe ich eine nackte WordPress Installation und das unveränderte Beans Theme verwendet. Lediglich den Dummy Content vom WordPress-Theme Unit Test habe ich importiert, damit auch Seiten, Posts und Bilder vorhanden sind.

Das Ergebnis ist schon sehr beeindruckend. 95% beim PageSpeed Score und 86% beim YSlow Score. Eine Seitenladezeit von 0,6 Sekunden bei 147kb Seitengröße und nur 10 Requests. Aber sieh selbst:

Ohne Caching Plugin und ohne angepasste .htaccess Datei. Bemerkbar macht sich das hauptsächlich im YSlow Wert, wegen der fehlenden Expires headers und ETags.

Unglaublich, was mit dem richtigen Theme möglich ist!

Mein Fazit

Die Integration von UIkit ist grandios umgesetzt. In Verbindung mit der API und dem Compiler ist das Beans Framework der perfekte Grundstein für tolle WordPress-Themes.

Ich habe auch selbst schon mit den ersten Child Themes für Beans begonnen. Das kostenlose Child Theme werde ich in wenigen Tagen hier auf bloggerpilot.com veröffentlichen und gleichzeitig auch selbst aktivieren.

Edit:
Mein Theme Crimson Red ist fertig und kann auch downgeloaded werden.

Gerne wird Beans auch mit Genesis vergleichen. Ich weiß aber nicht, ob dieser Vergleich wirklich passt, da die Konzepte doch sehr verschieden sind.
Ich sage aber eine große Zukunft für Beans voraus.