Rubrik > Design & Development

In typography sensitive projects we might want to allow our WordPress media captions to have  headings (or some sort of accentuated text) before the normal caption text. Let’s just call them WordPress caption headings. The simplest approach is to manually add the appropriate HTML to the caption text. However, this will quickly become an annoying task, if we have to …

There are situations, where we want to be able to directly trigger a search query on an external website. A common use case would be to redirect users to specific product pages in certain online shops. As long as our search terms are quite specific – as for example the ISBN numbers of books – it should be possible to …

With the Genesis Framework for WordPress it’s possible to add custom values to HTML attributes via attribute filters. So for example, if you need to add a custom class to a site element, use the corresponding filter with attributes[‚class‘]. The corresponding theme functions are located in: genesis/lib/functions/markup.php List of HTML Attribute Filters The following list shows the most important contexts (HTML elements) …

Im Normalfall werden in WordPress automatisch die für die eingestellte Benutzersprache zutreffenden Anführungszeichen verwendet – vorausgesetzt der wp-content/languages-Ordner enthält die entsprechenden Sprachdateien. Allerdings gilt das nur für native WordPress-Felder wie the_content oder the_excerpt und nicht automatisch auch für Custom Fields, Widgets oder Text aus Page Buildern. Eine weitreichende Lösung Der folgende Code hat bei mir letztllich zum Ziel geführt: deutsche Anführungszeichen in allen Bereichen …

Background gradients cannot be transitioned with CSS. We can work around it with pseudo elements and, of course, JavaScript. But maybe the quickest way to accomplish it, is setting background colors for the transition and using opacity on the gradient. Example selector { background-color: #353535; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, .9) 100% ); } selector:hover { …

Mit Hilfe der folgenden Snippets wird der Site-Header erst nach einer bestimmten Scrolldistanz eingeblendet und beim Zurückscrollen wieder ausgeblendet. Davon ausgenommen sind schmale Displays, auf diesen soll der Header stets sichtbar sein. Ein entsprechender Breakpoint wird festgelegt. jQuery: /* Hide and Show Site Header on Scroll ——————————————— */ /** * Hide and Show Site Header on Scroll * * @borrows …

Genesis Sticky Footer: eine umfassende Sticky-Footer-Lösung für das Genesis Framework für WordPress. Auf Pages mit wenig Inhalt positioniert das folgende Modul den Footer am unteren Rand des Browser-Viewports. Auf längeren, scrollbaren Pages verhält sich der Footer jedoch ganz normal und schließt erst am Dokumentende ab. Ob für eingeloggte User der Admin Bar im Frontend aktiviert ist oder nicht, wird erkannt und in die …

Um PHP-Code in einem Textwidget zu verwenden, benötigen wir nicht unbedingt ein Plugin. Es funktioniert auch mit dem folgenden Code-Snippet in der functions.php Ihres WordPress-Themes oder Ihrem eigenen Plugin. /* Execute PHP in text widget ——————————————— */ add_filter( ‚widget_text‘, ‚bubdev_allow_php_in_text_widget‘, 100 ); /** * Allow PHP inside the WP standard text widget */ function bubdev_allow_php_in_text_widget( $html ) { if ( strpos( …

Für ein Full Width Background Image, also ein fix positioniertes, sein Container-Element vollständig ausfüllendes Hintergrundbild gibt es eigentlich schon seit längerer Zeit eine perfekte Lösung: die Kombination aus background-attachment: fixed und background-size: cover. Leider funktioniert das auf iOS (iPhones und iPads) nicht wie geplant, und auch einzelne Android-Browser haben damit ein Problem. Aufgefallen ist es mir zuletzt beim offenbar immer noch sehr verbreiteten Dolphin …

Unter Post-Meta-Daten versteht man in WordPress Hintergrundinformationen wie den Post-Autor, das Post-Datum, die mit einem Post Type assoziierten Taxonomien und was es sonst noch an Infos zu einem Post geben mag. Möchten wir beispielsweise das Post Meta eines Post Types „Buch“ aufbereiten, so meinen wir mit sehr hoher Wahrscheinlichkeit genau das, was auch innerhalb der Büchersphäre als Metadaten verstanden wird: also Buchtitel, Buchautor, ISBN, Verlag, Erscheinungstermin, Rezensionen …

Gerade wo es um Bücher und Autoren geht, ist es hilfreich, wenn die Suchergebnisse nicht nur Text, sondern auch Bilder (Covers, Autorenfotos, Illustrationen) beinhalten. Gesichter, Grafiken und Schriftzüge werden mehr oder weniger bewusst wiedererkannt. Spuckt die Suche das passende Bild also gleich mit aus, ist allen geholfen. Am einfachsten lässt sich das in WordPress über die Featured Images (auch: Post Thumbnails) bewerkstelligen, die sich für ein Bücherportfolio …

Für Featured Images (auch: Post Thumbnails) sind in der WordPress-Welt keine Bildunterschriften vorgesehen. Zumindest scheinen sich Theme-Entwickler wenig dafür zu interessieren. Vielleicht gibt es ja einen guten Grund, den ich noch nicht verstanden habe. Bildunterschriften sind jedenfalls nützlich und in Hinblick auf Fotocredits manchmal auch ein Muss. Wahrscheinlich denke ich das nur, weil ich es von Büchern und Zeitschriften her so gewohnt …

Das Essential Grid Plugin von ThemePunch zählt aufgrund seiner enormen Vielseitigkeit zu den beliebtesten Grid-Lösungen für WordPress. Klarerweise lassen sich damit auch Bücher sehr ansehnlich präsentieren, womöglich sogar ohne eine Zeile Code zu schreiben — naja, fast. Was ist zum Beispiel, wenn nicht nur das Hauptarchiv, sondern auch die verzweigten Unterarchive (Kategorien, Schlagworte etc.) mit dem Grid dargestellt werden sollen. Oder anders: Wann sollte das …