Copywriting

Digital Marketing

Gabriel

Mateusz

Illustrator

Sketching

Alexandra

Piotr

Bart

Mike Kuczek

Sometimes we encounter text that is dynamically generated, hence we don&#8217;t know the length of it beforehand. We need to clamp it, or truncate it after a set number of lines. Would it be nice to be able to do it with css only? What If we actually could?



It&#8217;s actually possible and well supported even though relies on a webkit prefix. In the future we will get <code>line-clamp</code> which will make things even easier, but for now you can use the snippet below. 



<pre class="wp-block-code"><code lang="css" class="language-css line-numbers"><code>.clamp-second-line {</code>
	display: -webkit-box; /* You need this, it's an old version of display: flex; */	
	margin: 0 auto;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	height: 2em;/* Fallback for non-webkit (for perfect result put your line height in em's multiplied by the numer of lines) */
}</code></pre>

Text Overflow Ellipsis based on lines (Line Clamping)

While coding a theme or a plugin we often need to copy files into a <code>.zip</code> archive in order to upload it to wordpress. What if one command could do it for us?



Everyone uses <code>git</code>, at least for backup. You can configure <code>git</code> in a way that would upload your files to the server every time you wrote <code>git commit</code>. But it isn&#8217;t as straight forward as someone might want. Often we only need to package a <code>.zip</code> archive that would let us upload it in the wordpress admin area.



You can do it with this one simple command:



<pre class="wp-block-code"><code lang="bash" class="language-bash">git archive --format [format] --output [path/to/file] [branch name]</code></pre>



A ready command looks like this:



<pre class="wp-block-code"><code lang="bash" class="language-bash">git archive --format zip --output C:\\Users\\{user_folder_name}\\Desktop\\{theme_or_plugin_name}.zip main</code></pre>



I have put mine in a npm script:



<pre class="wp-block-code"><code lang="bash" class="language-bash">"zip": "git archive --format zip --output C:\\Users\\micha\\Desktop\\biiird.zip main"</code></pre>



Now the only thing I have to do is write <code>npm run zip</code> in the command line and almost instantly I will have a <code>.zip</code> file with my theme on my desktop, ready to be uploaded. The <code>git archive</code> command respects the <code>.gitignore</code> file, so you can easily choose what files/folders you want in your <code>.zip</code> file.

How to package a theme into a zip file using git

Using these three arguments as an addition to your&#8217;s can speed up the query process. Check the comments to be sure you can use them. 



<pre class="wp-block-code"><code lang="php" class="language-php">$args = [
	// Your query arguments here
	'no_found_rows' =&gt; true, // counts posts, remove if you need pagination
	'update_post_term_cache' =&gt; false, // queries terms, remove if you need categories or tags
	'update_post_meta_cache' =&gt; false, // queries post meta, remove if you need post meta
];

$loop = new WP_Query( $args );</code></pre>

Improve performance of WP_Query

Installing Tailwind became a lot easier since this post was first written, so I have rewritten it. It also doesn&#8217;t require webpack now and is dozens times faster! Enjoy.



Before we start you will need:



<ol>
<li>Local server (php, apache and MySQL)</li>



<li>Node.js</li>



<li>WordPress installed</li>
</ol>



<h2 class="wp-block-heading" id="1-setting-up-a-theme" class="anchor-offset">Setting up a theme</h2>



You can use your own theme or go to <a href="https://underscores.me" class="rank-math-link">underscores.me</a> and generate a new one.



<a href="https://developer.wordpress.org/themes/basics/including-css-javascript/" data-type="URL" target="_blank" rel="noreferrer noopener">Enqueue your CSS</a> in the functions.php file like this:



<pre class="wp-block-code"><code lang="php" class="language-php">add_action(&nbsp;'wp_enqueue_scripts',&nbsp;'enqueue_function',&nbsp;10&nbsp;);
function enqueue_function() {
	$version = ( wp_get_environment_type() === 'development' ) ? time() : BIIIRD_THEME_VERSION;
	wp_enqueue_style(&nbsp;'tailwind',&nbsp;get_template_directory_uri()&nbsp;.&nbsp;'/assets/css/main.css',&nbsp;$version,&nbsp;true&nbsp;);
}</code></pre>



The <code>$version</code> variable is just one very useful trick I use to swap the <code>time()</code> function for the theme version in production environment. To use it you have to define at the top of your functions.php the constant like this: <code>define( 'BIIIRD_THEME_VERSION', '1.0.2' );</code>.



Now in your theme folder create an assets folder, and inside it two folders named <code>src</code> and <code>css</code>. Inside the <code>src</code> folder create your css file and name it: <code>main.css</code>.



<h2 class="wp-block-heading" id="2-installing-necessary-packages" class="anchor-offset">Installing necessary packages</h2>



<ul>
<li>Tailwind CSS</li>



<li>Autoprefixer</li>



<li>Postcss and postcss-cli</li>
</ul>



Open your terminal/command prompt and run this: 



<pre class="wp-block-code"><code lang="bash" class="language-bash">npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest</code></pre>



At this point you have everything you need installed.



<h2 class="wp-block-heading" id="3-creating-config-files" class="anchor-offset">Creating config files</h2>



Now create a tailwind.config.js file and put this object inside:



<pre class="wp-block-code"><code lang="javascript" class="language-javascript">module.exports&nbsp;=&nbsp;{
	mode: 'jit',
	purge:&nbsp;{
		content: [
			'./src/**/*.php',
			'./template-parts/**/*.php',
			'./*.php',
			'./inc/**/*.php',
			'./inc/*.php',
			'./src/**/*.js',
		],
	},
	darkMode:&nbsp;false, //you can set it to media(uses prefers-color-scheme) or class(better for toggling modes via a button)
	theme:&nbsp;{
		extend:&nbsp;{},
	},
	variants:&nbsp;{},
	plugins:&nbsp;[],
}</code></pre>



This will be the file where you configure your tailwind setup, now that there is a <code>'jit'</code> mode (which means Just-In-Time compilation) you probably won&#8217;t have to make much changes to this file. The <code>purge</code> item says which files should the compiler look for classes, you may have to modify it to fit your theme.



And one last file postcss.config.js, and inside it: 



<pre class="wp-block-code"><code lang="javascript" class="language-javascript">module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
 }</code></pre>



Now in the /assets/src/main.css file put this: (you can ommit the first line if you just want tailwind as an addon to a sass project)



<pre class="wp-block-code"><code lang="css" class="language-css">@tailwind&nbsp;base;
@tailwind&nbsp;components;
@tailwind&nbsp;utilities;</code></pre>



<h2 class="wp-block-heading" id="4-adding-a-start-script-to-npm" class="anchor-offset">Adding a start script to npm</h2>



Open package.json file and modify the scripts object to add a watch script and tell it to run postcss:



<pre class="wp-block-code"><code lang="json" class="language-json">"scripts":&nbsp;{
	"watch": "npx postcss ./assets/src/main.css -o ./assets/css/main.css --watch",
	"zip": "git archive --format zip --output C:\Users\{your_user_name}\Desktop\{your_theme_name}.zip main"
&nbsp;&nbsp;},</code></pre>



At this point make sure you have these two environment variables set correctly, you can set them in the terminal like this: (on Linux, ommit the <code>SET</code> keyword) [thanks Will for the reminder]



<pre class="wp-block-code"><code lang="bash" class="language-bash">SET NODE_ENV="development" ; SET TAILWIND_MODE="watch"</code></pre>



By now everything should be working fine, run this in the terminal to initialize watching of your changes:



<pre class="wp-block-code"><code lang="bash" class="language-bash">npm run watch</code></pre>



Now you can jump into the real fun, start using Tailwind classes wherever you want, the JIT compiler will look which classes you have used and will only put these into the <code>main.css</code> file!

How to set up Tailwind CSS (JIT) for WordPress

I was born in a small village in the midst of Poland. The whole Kuczek&#8217;s family was working in the public field to promote healthy living. My dad was running a printing shop (mainly printing health books and cookbooks) and my mom (a medical doctor) was teaching about health and chronic diseases prevention. Amid all that was I, an evidence for how a child can not only survive but thrive on a vegan diet. That&#8217;s true, to this day I haven&#8217;t eaten any meat in my life. 



<h2 class="wp-block-heading" id="1-left-school-yet-finished-school" class="anchor-offset">Left school, yet finished school</h2>



My mom was an advocate of public school system, she has gone through it successfully, whereas my father was rather skeptical of the validity of methods used to teach children, he suggested homeschooling. Eventually my mother pushed her way and I went to the first class of Elementary School. I have enjoyed the contact with other children at school, but my parents soon realized how much time is wasted at school and they took me into homeschooling. 



Family friends argued that to be a very bad decision. How can a child get social other than by going to school? – they said. Time went by and people started to observe a strange thing, not only wasn&#8217;t I anisocial, actually I happened to be the one that always tried to be around other people. So I turned not only to be a proof for a vegan diet, but also for homeschooling. 



Unfortunately my mom wasn&#8217;t so thrilled, I was a very tough student, it wasn&#8217;t easy to make me learn. After the sixth grade she gave up (and right so), she said that I am going to the public school. But this time my dad hold his stance hard and decided that he will be the director of our homeschool. I have to point your eyes to the word &#8220;director&#8221;, because that was exactly what he became. I had no teacher. All I learned was by studying on my own by reading and researching with the help of Google. Throughout all Middle School I did not have any tutor. It&#8217;s needed to add that I was spending around 3 hours daily learning school stuff, not 7 hours that are usual for regular school students. 



After passing a state exam after Middle School with the rating that was better than 95% of all students in Poland that year, it was clear that the public schooling system is a fraud, robbing children from their so valuable time.



Soon afterwards it was time to decide whether I want to go to High School or not. I have decided that I will go, to have an experience of a regular student, so that I could see clearly what is better and why. 



<h2 class="wp-block-heading" id="2-getting-to-know-stephen-covey-and-other-business-leaders" class="anchor-offset">Getting to know Stephen Covey and other business leaders</h2>



Although you may have been thinking &#8220;What a child! – doing so well without school or even a tutor.&#8221; – I had my flaws. I didn&#8217;t do chores, I hated going anywhere with my parents, I had been spending some days playing online games and didn&#8217;t exercise enough. 



When 13, my dad gave me a book called &#8220;7 Habits of Highly Effective Teens&#8221; and it has turned my life around. When I got the book I didn&#8217;t want to read it, my dad tried to read it to me but I didn&#8217;t like that either. The book went on a shelf. 



One year later when I was tidying my room and rearranging books on my self this one has opened, it opened in a particular location, where I&#8217;ve read &#8220;This book shouldn&#8217;t be read by parents&#8221;, as you can probably tell, that gripped me, and I read it to the end. I was enlightened. The book showed me how by taking responsibility on myself I can reshape the world around me. As every boy I also liked winning, that&#8217;s why I was playing computer games. But after reading that book my orientation shifted to the real world.



 Soon afterwards my dad has made me an offer I couldn&#8217;t resist – that I could take over his blueberry plantation. 



<h2 class="wp-block-heading" id="3-learning-business-through-blueberry-farming" class="anchor-offset">Learning business through blueberry farming</h2>



Blueberry farming is a rewarding job. People love eating blueberries. I haven&#8217;t met a single individual that wouldn&#8217;t like blueberries. In consequence people love you – &#8217;cause you have the berries! 



But as any kind of business farming has it&#8217;s own challenges. You have to find workers – especially during summer, you have to trim the plants, turn watering on and off, fertilize the soil and everything has to be done on a schedule. You also have to find customers to buy your fruits.



So I learned how to find people that would be good to work with, care for them, market the product of our work and give account to my father.



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="768" src="https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/DSCN0168-1024x768-1.jpg" alt="" class="wp-image-1353" srcset="https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/DSCN0168-1024x768-1.jpg 1024w, https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/DSCN0168-1024x768-1-300x225.jpg 300w, https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/DSCN0168-1024x768-1-768x576.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">My giant no pesticide no herbicide blueberries</figcaption></figure>



While I was learning about management, leadership and farming I also got interested in art, in the next part I go through my struggle for creativity.



<h2 class="wp-block-heading" id="4-crave-for-art" class="anchor-offset">Crave for art</h2>



It&#8217;s highly probable that if you are creative you can&#8217;t focus on anything else than creating. Creativity is a blessing but also a curse. Especially if you have other responsibilities.



I got interested in painting at the age of 15. I wanted to paint things like this:



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/Bez-nazwy-13-1024x576.png" alt="Hot air balloon in front of a mountain" class="wp-image-1354" srcset="https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/Bez-nazwy-13-1024x576.png 1024w, https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/Bez-nazwy-13-300x169.png 300w, https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/Bez-nazwy-13-768x432.png 768w, https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/Bez-nazwy-13-1536x864.png 1536w, https://wordpress-812575-2848721.cloudwaysapps.com/wp-content/uploads/2019/11/Bez-nazwy-13.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Hot air Balloon artwork</figcaption></figure>



I earned some money and bought a Wacom tablet. 



<h2 class="wp-block-heading" id="5-why-psychology" class="anchor-offset">Why psychology?</h2>



<h2 class="wp-block-heading" id="6-whats-to-come" class="anchor-offset">What&#8217;s to come?</h2>

Meet our crew of creators, designers, and world-class problem-solvers

Our People

Gabriel

Mateusz

Alexandra

Piotr

Bart

Mike Kuczek

Who we are

Why Biiird?

Founded in Poland, working for the world

Self-funded